Question

使用花车时遇到麻烦。我有一个有图像和内容的容器。它们并排排列。根据设备，图片的大小始终是固定，而内容大小应该适应容器的其余部分，因此我不想使用内容的宽度。

当我不添加宽度时，内容会下降到下一行，因为它会尝试将内容适合容器的100％而不是垂直延伸。以下是发生的事情的预览：http://codepen.io/gasim/pen/zxRRYb。这是代码。 HTML：

<div class="news-item clearfix">
  <div class="image-container"></div>
  <div class="main-container">
    <h1>Hello World</h1>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
  </div>
</div>

CSS：

.news-item {
  width: 900px;
  background: white;
  display: block;
  margin: 10px auto 0 auto;
  padding: 20px;
  height: 350px;
}

.news-item .image-container {
  width: 400px;
  height: 200px;
  display: block;
  background: red;
}

.news-item .main-container {
  padding: 10px;
}

.news-item .image-container, .news-item .main-container {
  float: left;
}

如何让它自动将.main-container的宽度扩展到news-item的末尾？我不想使用JS或Flexbox模型。

Answer 1

将.image-container和.main-container的显示属性设置为“inline-block”。然后根据您在％。

中的选择设置.main-container的宽度

Answer 2

阅读一段时间后，我发现，从float: left删除main-container可解决问题。我认为原因与使用文本并将其包裹在图像周围相同。但由于盒子不能缠绕，它按预期工作。

没有宽度的浮动在长内容上转到下一行

2 个答案: