html - 向左浮动被阻止且未与左侧对齐

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/

更新：限制

score 1 · Accepted Answer

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

（没有float）

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

score 0 · Accepted Answer

添加 clear: left 到 css for block3

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

score 0 · Accepted Answer

只需添加 clear:both; 到#block3

请参阅修改后的小提琴。

(http://jsfiddle.net/tech0925/L4VWq/1/)

html - 向左浮动被阻止且未与左侧对齐

3 回答 3

Related

Reference