Question

我正在尝试使用div和CSS布局屏幕。这是一个简单的布局，但我似乎无法将div排成一行。我想要一个包装div，其中包含两个div：一个与左边对齐，一个与右边对齐。然而，它们最终相互叠加。

我知道这个问题很简单。我在这里缺少什么？

如果我将右div的宽度缩小为60%，它会向右排列，但我不应该使用父100%宽度的div }？

#product_wrapper {
  display: inline-block;
  height: 75%;
  width: 75%;
  background-color: white;
  text-align: top;
  margin: 0 auto;
}
#images_wrapper {
  background-color: red;
  display: inline-block;
  height: 100%;
  width: 30%;
  margin: 0;
  padding: 0;
}
#content_wrapper {
  background-color: blue;
  display: inline-block;
  height: 100%;
  width: 70%;
  margin: 0;
  padding: 0;
}

<div id="product_wrapper">
  <div id="images_wrapper">Foo</div>
  <div id="content_wrapper">Bar</div>
</div>

Answer 1

Float离开你的孩子元素：

<强> jsBin demo

#product_wrapper > *{float:left;}

请注意，inline-block会导致内部元素实际上像inline元素一样运作 白色空间计数在哪里！

<小时/> SO 另一种方式是修改HTML，删除 NewLine 分隔符：

<强> jsBin demo

<div id="images_wrapper">

     Foo content

</div><div id="content_wrapper">
     ^^-------------------------------------- no space here

     Bar content

</div>

第三种方式（最差一种方法）是为父级设置 font-size为0 （从逻辑上删除孩子的空白差距，因为现在是' 0' ）; ＆GT;＆GT;然后将子元素的字体大小重置为px（原因em将无效，因为父级已0}。
但是，如果您使用em和大小继承，那么这是松散跟踪动态和响应式字体大小的好方法。

Answer 2

问题是html中的空格，它占据了元素之间的一些空间。

修复它的一种方法是

#product_wrapper {
  font-size: 0;    /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
  font-size: 16px; /* Reset to whatever vaue */
}

＆＃13;

#product_wrapper {
  display: inline-block;
  height: 75%;
  width: 75%;
  background-color: white;
  text-align: top;
  margin: 0 auto;
  font-size: 0;
}
#images_wrapper, #content_wrapper {
  font-size: 16px;
}
#images_wrapper {
  background-color: red;
  display: inline-block;
  height: 100%;
  width: 30%;
  margin: 0;
  padding: 0;
}
#content_wrapper {
  background-color: blue;
  display: inline-block;
  height: 100%;
  width: 70%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="product_wrapper">
  <div id="images_wrapper">Foo</div>
  <div id="content_wrapper">Bar</div>
</div>

＆＃13;

Answer 3

使用float：left而不是display：inline-block

＆＃13;

#product_wrapper {
  display: inline-block;
  height: 75%;
  width: 75%;
  background-color: white;
  text-align: top;
  margin: 0 auto;
}
#images_wrapper {
  background-color: red;
  float:left;
  height: 100%;
  width: 30%;
  margin: 0;
  padding: 0;
}
#content_wrapper {
  background-color: blue;
  float:left;
  height: 100%;
  width: 70%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="product_wrapper">
  <div id="images_wrapper">Foo</div>
  <div id="content_wrapper">Bar</div>
</div>

＆＃13;

DIV和CSS布局没有排队，但为什么呢？

3 个答案: