仅自动浮动 css？

Question

我在想这样的布局： Layout with 2 columns and boxes, that automatically fit in free space

是否只有 css 解决方案？

我当前的 html，我用 php:

生成的

<div class="main">
  <div class="header"><h1>Header blablablaaa</h1></div>
  <div class="box">
    <div class="box-header"><h2>Sub-Header1</h2></div>
    <div class="box-text"><p>Text1</p></div>
  </div>
  <div class="box">
    <div class="box-header"><h2>Sub-Header2</h2></div>
    <div class="box-text"><p>Text2</p></div>
  </div>
  <div class="box">
    <div class="box-header"><h2>Sub-Header3</h2></div>
    <div class="box-text"><p>Text3</p></div>
  </div>
</div>

Answer 1

这是 css 的事情，需要对您的 HTML 进行更多修改。如果你想让两个 dis 在不影响其 right/left 高度的情况下自由工作，你需要将它们分开在不同的 div

这与您的要求类似，您需要做的是为您需要添加所需的任何额外样式css

<style>
.left_side, .right_side{ width:45%; float:left;}
.left_side{ margin-right: 10px;}
.box { border: 2px solid black; width:100%; float:left; margin: 5px;}
.a1 { min-height:150px;}
.a2 { min-height:200px;}
.a3 { min-height:250px;}
.a4 { min-height:150px;}
</style>
    <div class="main">
      <div class="header"><h1>Header blablablaaa</h1></div>
        <div class="left_side">
          <div class="box a1">
           <div class="box-header"><h2>Sub-Header1</h2></div>
            <div class="box-text"><p>Text1</p></div>
           </div>
           <div class="box a2">
             <div class="box-header"><h2>Sub-Header2</h2></div>
             <div class="box-text"><p>Text2</p></div>
           </div>
       </div>
      <div class="right_side">
      <div class="box a3">
        <div class="box-header"><h2>Sub-Header3</h2></div>
        <div class="box-text"><p>Text3</p></div>
      </div>
 <div class="box ai4">
        <div class="box-header"><h2>Sub-Header4</h2></div>
        <div class="box-text"><p>Text3</p></div>
      </div>
</div>
    </div>

仅自动浮动 css？

Automatic float css only?

html

css

multiple-columns

css-float

box