0

以下のコードを検討してください

<!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)と、制限付き:

  1. 余分な HTML マークアップを追加せずに
  2. 新しいCSSを適用する必要がある場合は、すべてのブロックに適用する必要があります

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

更新: 制限事項

4

3 に答える 3

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

(いいえfloat)

マークアップから残されたスペースと戦うために、ここで概説されているように負の右マージンを追加することもできます: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-01-19T17:42:06.740 に答える
0

clear：both;を追加するだけです。＃block3へ

改訂されたフィドルを参照してください。

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

于 2013-01-19T17:57:56.110 に答える
0

block3 の css に clear: left を追加します。

  #block3 {
    background-color:green;
    width:48%;
    height:140px;
    clear: left;
  }
于 2013-01-19T17:19:36.963 に答える