CSS

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/

更新

像这样：没有class。你告诉 main class 它是 flexbox，它的子将有一个 padding 把它们分开。

.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>

CSS - 将两个 Div 并排浮动，而不是它们在彼此下方

CSS - Floating Two Divs Next To Eachother, Instead They Go Underneath Eachother

html

css-float