Question

我正在尝试使用图像div和文本在其下方创建1 div，并在其旁边另一个。需要它稍后回应。

由于某种原因使它们的宽度达到50％会使它们叠加？我必须把它们放到49.7％，我不知道额外的填充来自哪里。

现在就是这样：

HTML：

<div class="center">
  <div class="home2">
    <div class="home2_first">
      <img src="Images/home_pic1.png" />
      <p>Lorem Ipsum is simply dummy text!</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>

  <div class="home2">
    <div class="home2_second">
      <img src="Images/home_pic2.png" />
      <p>Lorem Ipsum is simply dummy text!</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>
</div>

CSS：

.home2 {
  margin: 0 auto;
  width: 49.7%;
  text-align: center;
  display: inline-block;
  background-color: red;
  height: 400px;
}

.home2 p {
  font-family: 'cabinRegular', arial, sans-serif, verdana;
  color: #000000;
  font-size: 18px;
}

.center {
  margin: 0 auto;
  width: 100%;
  background-color: blue;
}

.home2_first img {
  margin: 0 auto;
  padding: 0;
}

.home2_second img {
  margin: 0 auto;
  padding: 0;
}

https://jsfiddle.net/Lq5vLdrm/7/

Answer 1

在Stack Overflow上的多个位置找到答案，其中一个是准确的：Two inline-block, width 50% elements wrap to second line

出现此问题是因为mysql>select customers.name from customers, orders, order_items, books ->where customers.customerid = orders.customerid ->and orders.orderid = order_items.orderid ->and order_items.isbn = books.isbn ->and books.title = 'Java 2'; +-------------+ | name | +-------------+ | Julie Smith | +-------------+属性考虑了HTML中的空格。

可能的解决方法是删除第一个容器的结束标记和第二个容器的开始标记之间的空格，如下所示：

display: inline-block

或者你可以这样放置它们：

</div><div class="home2">

Answer 2

我认为display: inline-block缺乏对整个容器的支持，也许您可以将float: left;添加到您的班级.home2以提供一个可靠的容器。然后在@media上提供所需的宽度。

以下是示例代码。

.home2 {
  margin: 0 auto;
  width: 50%;
  text-align: center;
  float: left;
  display: inline-block;
  background-color: red;
  height: 400px;
}

Answer 3

解决方案是使用display: block和float: left或float: right代替。请参阅jsfiddle此处。
使用我喜欢的flexbox：只需给父容器： display: flex; flex-flow: row;并从其子项中删除display: inline-block属性，或将其设置为display: block。请参阅jsfiddle此处。
使用表格布局以旧式方式进行：父级为display: table，儿童为display: table-cell。请参阅jsfiddle此处。

将2个div与图像+文本并排放置

3 个答案: