CSS-在彼此相邻的位置上浮动两个Div，而它们却在彼此之下

Question

我正在尝试将两个div相邻放置，并牢记移动访客。

问题：当div中使用大量文本时，它不是浮在彼此旁边，而是在下面。

这是一个例子：

.codeblock {
     width:500px;
}
.left{
     float: left;
}

<div class="codeblock">
     <img src="https://placehold.it/307x322" class="left" style="width:125px">
     <div class="left">
           <h3>Some title</h3>
           <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
     </div>
</div>

为什么会这样？有没有不使用固定值（图像样式宽度除外）的解决方案？

Answer 1

仅浮动图片

.codeblock {
     width:500px;
}
.left{
     float: left;
     margin-right:10px;
}

<div class="codeblock">
     <img src="https://placehold.it/307x322" class="left" style="width:125px">
     <div >
           <h3>Some title</h3>
           <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
     </div>
</div>

Answer 2

另一个选择是使用flexbox而不是float。会有更多工作要做，但这是一个新功能，尝试新事物总是很不错的。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

更新

赞：没有课程。您会告知主要类它是flexbox，并且其子类将进行填充以分隔它们。

.codeblock {
  display: flex;
  width:500px;
}
.codeblock > * {
  padding: 0 10px;
}

<div class="codeblock">
     <img src="https://placehold.it/307x322">
     <div >
           <h3>Some title</h3>
           <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
     </div>
</div>

Answer 3

考虑到移动用户，我会这样使用flex-wrap和内容的最小值

.codeblock {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width:500px;
}

.codeblock>img {
  flex: 0 0 125px;
  width: 125px;
  height: auto;
  margin-right: 20px;
}

.codeblock>div {
  flex: 1 1 200px;
  min-width: 200px;
}

<div class="codeblock">
  <img src="https://placehold.it/307x322">
  <div>
    <h3>Some title</h3>
    <p>Some text with a long explanation of how buildings don't make the Earth any heavier because all the materials were already on it.</p>
  </div>
</div>