Hai phần tử khối nội tuyến, mỗi phần tử rộng 50%, không nằm cạnh nhau trong một hàng

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Đoạn mã trên đang cố gắng đặt div #left và div #right cạnh nhau, trong một hàng. Nhưng như bạn có thể thấy trong URL JSFiddle ở trên, đây không phải là trường hợp.

Tôi có thể giải quyết vấn đề khi giảm chiều rộng của một trong các div xuống 49%. Xem http://jsfiddle.net/mUKSC/ . Nhưng đây không phải là một giải pháp lý tưởng vì một khoảng cách nhỏ xuất hiện giữa hai div.

Một cách khác mà tôi có thể giải quyết vấn đề là thả nổi cả hai div. Xem http://jsfiddle.net/VptQm/ . Điều này hoạt động tốt.

Nhưng câu hỏi ban đầu của tôi vẫn còn. Tại sao khi cả hai div được giữ dưới dạng phần tử khối nội tuyến, chúng không khớp cạnh nhau?

Question 2

Khi sử dụng inline-blockcác phần tử, sẽ luôn có whitespace vấn đề giữa các phần tử đó (không gian đó rộng khoảng ~ 4px).

Vì vậy, hai của bạn divs, cả hai đều có chiều rộng 50%, cộng với whitespace(~ 4px) có chiều rộng hơn 100%, và do đó, nó bị hỏng. Ví dụ về vấn đề của bạn:

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Mở rộng đoạn mã

Có một số cách để khắc phục điều đó:

1. Không có khoảng trống giữa các phần tử đó

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

Mở rộng đoạn mã

2. Sử dụng nhận xét HTML

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

Mở rộng đoạn mã

3. Đặt cha mẹ font-sizethành 0, sau đó thêm một số giá trị vào inline-blockcác phần tử

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

Mở rộng đoạn mã

4. Sử dụng một biên âm giữa chúng ( không thích hợp )

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Mở rộng đoạn mã

5. Góc đóng cửa giảm

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

Mở rộng đoạn mã

6. Bỏ qua một số thẻ đóng HTML nhất định (cảm ơn @thirtydot đã tham khảo )

Hiển thị đoạn mã

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Mở rộng đoạn mã

Người giới thiệu:

Như @ MarcosPérezGude đã nói , cách tốt nhất là sử dụng remvà thêm một số giá trị mặc định font-sizevào htmlthẻ (như trong HTML5Boilerplate ). Thí dụ:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Cập nhật : gần đến năm 2018, hãy sử dụng flexbox hoặc thậm chí tốt hơn - bố cục lưới CSS .

Question 3

câu trả lời hay trong css3 là:

white-space: nowrap;

trong nút cha và:

white-space: normal;
vertical-align: top;

trong div (hoặc khác) ở mức 50%

exemple: http://jsfiddle.net/YpTMh/19/

BIÊN TẬP:

có một cách khác với:

font-size: 0;

cho nút cha và ghi đè nó trong nút con

Question 4

Đó là bởi vì khoảng trắng giữa hai div của bạn đang được hiểu là một khoảng trắng. Nếu bạn đặt các <div>thẻ của mình thẳng hàng như hình dưới đây, vấn đề đã được khắc phục :

<div id="left"></div><div id="right"></div>

Question 5

Vì có một khoảng trống giữa các phần tử. Nếu bạn loại bỏ tất cả khoảng trắng, chúng sẽ phù hợp .

<div id="left">Left</div><div id="right">Right</div>

Question 6

Làm cho chúng chặn thay vì khối nội tuyến. Điều này sẽ hiển thị các div bỏ qua khoảng trắng giữa chúng.

display:block;

hoặc xóa khoảng cách giữa các thẻ

<div id='left'></div><div id='right'></div>

hoặc thêm

margin: -1en;

vào một trong các div để giảm thiểu không gian bị chiếm bởi một không gian duy nhất được hiển thị.

Question 7

Vui lòng kiểm tra mã dưới đây:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Mở rộng đoạn mã

Question 8

Ví dụ về Flexbox - điều này sẽ được sử dụng cho lớp cha giữ hai phần tử cạnh nhau.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Lấy từ Căn giữa theo chiều dọc một div bên trong một div khác

Question 9

Nó có thể được thực hiện bằng cách thêm css display: inline vào div chứa các phần tử nội dòng.

Trong khi loại bỏ khoảng trắng bằng cách sử dụng lề có giá trị âm, cần thêm nó vào phần tử cụ thể này. Vì thêm nó vào một lớp sẽ ảnh hưởng đến những nơi mà lớp này đã được sử dụng.

Vì vậy, sẽ an toàn hơn nếu sử dụng display: inline;

Question 10

thêm float: left; cho cả hai thẻ div.

div {
  float: left;
}

Mở rộng đoạn mã