Question

考虑以下代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">  
  <style>
     #block0 {
      width:400px
     }

     #block1, #block2, #block3 {
       float: left;
       display:inline;
     }

     #block1 {
        background-color:red;
        width:48%;
        height:200px;
      }

      #block2 {
        background-color:blue;
        width:48%;
        height:120px;
      }

      #block3 {
        background-color:green;
        width:48%;
        height:140px;
      }

  </style>

  </head>
  <body>

      <div id="block0">
          <div id="block1"></div>

          <div id="block2"></div>

          <div id="block3"></div>
      </div>

  </body>
</html>

如何使block3(green)块与左侧对齐并将其置于block1(red)块下，并具有以下限制：

，无需添加额外的HTML标记
如果需要申请新的CSS，需要申请所有块

示例：http://jsfiddle.net/L4VWq/

更新：限制

Answer 1

 #block1, #block2, #block3 {
   display:inline-block;
   vertical-align: top;
 }

（没有float）

为了对抗标记留下的空间，您还可以添加一个负右边距，如下所示：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

添加一个清除：左边的css for block3

  #block3 {
    background-color:green;
    width:48%;
    height:140px;
    clear: left;
  }

Answer 3

简单地添加清楚：两者;到＃block3

见修改过的小提琴。

（http://jsfiddle.net/tech0925/L4VWq/1/）

左边的浮子被阻挡而没有对齐到左边

3 个答案: