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

Question

我正在尝试制作 1 个 div，其下方有一个图像 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

1. 解决方案是使用 display: block 和 float: left 或 float: right 代替。 参见 jsfiddle在这里。

2. 使用我更喜欢的 flexbox:只需给父容器: 显示: flex ； flex-flow: row; 并从其子项中删除 display: inline-block 属性或将其设置为 display: block。参见 jsfiddle在这里。

3. 使用表格布局的老式方法:display: table 用于父级，display: table-cell 用于子级。参见 jsfiddle在这里。