thucnguyenblog logo

HTML/CSS: Tạo giao diện các ô trên một hàng

thucnguyenit35
04/09/2016 - 01:38:00

Để dàn được giao diện như trên thì có rất nhiều cách:

  1. Dùng table: Cách này là cách đơn giản nhất nhưng không khuyến khích vì table rất khó để hiển thị tốt trên đa màn hình với các kích thước khác nhau.
  2. Áp dụng thuộc tính css inline-block cho từng ô trên dòng.
  3. Áp dụng thuộc tính css float cho từng ô trên dòng

Cách 1: Như chúng ta đã biết hiện nay thì với sự phát triển của công nghệ cho ra đời nhiều thiết bị có khả năng duyệt web như điện thoại, máy tính bảng, laptop, máy tính để bàn. Tất cả các thiết bị công nghệ đều có kích cỡ màn hình và độ phân giải không giống nhau vì thế nếu dùng table để biểu diễn danh sách các ô theo hàng và cột thì khả năng thích ứng với tất cả các loại màn hình là rất khó làm.

Với sự ra đời và phát triển không ngừng của HTML/CSS qua các phiên bản cho phép chúng ta có thể tạo ra giao diện có thể thích ứng với hầu hết các kích cỡ màn hình thiết bị (responsive).

Cách 2: Để làm được giao diện với hàng và cột là sử dụng thuộc tính css inline-block các ô sẽ tự động nhảy xuống dưới nếu không đủ không gian. Cách này cũng khá đơn giản nhưng đôi khi ta không thể áp dụng được hoặc áp dụng nó lại trở nên phức tạp vì css có tính thừa kế.

HTML:

<div id="header">
  <h2>
HEADER
</h2>
</div>
<div id="content">
  <div class="row">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>

CSS:


#header {
  background: #9a9a9a;
  color: #fff;
  text-align: center;
  padding: 10px;
}
#content {
  background: #e0e0e0;
  margin: 0 auto;
  margin-top: 5px;
  padding: 20px;
}
.item {
  width: 150px;
  height: 200px;
  background: #fb8787;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}
.item:last-child {
  margin-right: 0px;
}
 

RESULT:

 
Cách 3: Áp dụng thuộc tính css float cho từng ô trên dòng, các ô sẽ tự động trôi về 1 phía và nhảy xuống dưới nếu không đủ không gian. Những người chưa có kinh nghiệm về html/css thì sẽ cảm thấy có gì đó sai sai khi dùng float. Đúng vậy, khi dùng float nhiều người không chịu clear thuộc tính float và điều này làm cho giao diện của website trở nên phức tạp lên và khó inspect element trên trình duyệt. Đây là 1 ví dụ:

HTML:

<div id="header">
  <h2>
HEADER
</h2>
</div>
<div id="content">
  <div class="row">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>
 

CSS:

#header {
  background: #9a9a9a;
  color: #fff;
  text-align: center;
  padding: 10px;
}
#content {
  background: #e0e0e0;
  margin: 0 auto;
  margin-top: 5px;
  padding: 20px;
}
.item {
  width: 150px;
  height: 200px;
  background: #fb8787;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.item:last-child {
  margin-right: 0px;
}

RESULT:

 
Như chúng ta nhìn thấy phần content không bao trùm hết nội dung, lỗi này xảy ra khi bạn quên không clear float. Để giải quyết thì cách thủ công nhất là thêm thẻ <div style="clear: both"></div> vào sau ô cuối cùng của hàng.
Ví dụ:

HTML:

<div id="header">
  <h2>
HEADER
</h2>
</div>
<div id="content">
  <div class="row">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div style="clear: both">
    
    </div>
  </div>
</div>

Cách giải quyết trên chưa thực sự tốt khi mà bạn chỉnh sửa css nhưng không được đụng với html. Một cách rất hay mà bootstrap đang áp dụng cho class row đó là dùng element giả để chèn 1 thẻ html có chức năng clear float.

Chỉ cần thêm đoạn CSS:

.row:after {
  clear: both;
  content: " ";
  display: block;
}
 
Full source code:

HTML:

<div id="header">
  <h2>
HEADER
</h2>
</div>
<div id="content">
  <div class="row">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>
 

CSS:

#header {
  background: #9a9a9a;
  color: #fff;
  text-align: center;
  padding: 10px;
}
#content {
  background: #e0e0e0;
  margin: 0 auto;
  margin-top: 5px;
  padding: 20px;
}
.row:after {
  clear: both;
  content: " ";
  display: block;
}
.item {
  width: 150px;
  height: 200px;
  background: #fb8787;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.item:last-child {
  margin-right: 0px;
}
 

Tags: CSS Grid
 Author infomation:
Xin chào các bạn! Tôi tên là Thức, tôi sinh ra và lớn lên tại quê hương Yên Mỹ, Yên Mô, Ninh Bình, từ thời Trung học tôi đã yêu thích tin học và công nghệ. Tôi tốt nghiệp ngành Công nghệ thông tin tại Đại học Mở Hà Nội, hiện tại tôi đang là một Web Developer. Tôi tạo ra blog này nhằm mục đích chia sẻ kinh nghiệm, kiến thức mà tôi đã trải qua trong cuộc sống, vì thế sẽ có thể thiếu sót mong các bạn đóng góp để giúp tôi hoàn thiện hơn.