獲得了一堆的div正確排隊是浮動一個div右內

這是我的代碼（簡化）的問題右側div上的矩形div不能正確排列。我要的是讓他們排隊從左至右，再延續到第二行，當他們走過去的div的邊緣：

意欲的神色：

._______________________________________________________________________. 
    |                  | 
    |        Title         | 
    |                  | 
    | blah blah blah blah blah blah          | 
    |                  | 
    | Ingredient: [    ]  [block] [block] [block] [block] | 
    |          [block] [block] ...    | 
    |                  | 
    |_______________________________________________________________________|

來源

2011-02-12 Razor Storm

變化：

.ingredient 
{ 
    display:block; 
    ...

要：

.ingredient 
{ 
    display:inline-block; 
    ...

而且你一切都準備好了。該財產的名稱是不言自明的。

這裏是一個小提琴：http://jsfiddle.net/kV9yn/12/。

來源

2011-02-12 00:13:52 Blender

哇，這是簡單><謝謝！ – 2011-02-12 00:16:41

怎麼是這樣的：

<!DOCTYPE html> 
<html> 
<head> 
    <title>The divs?</title> 
    <style type="text/css"> 
     h1 { 
      text-align: center; 
     } 
     body { 
      margin: auto; 
      width: 600px; 
     } 
     #blocks { 
      float: left; 
      width: 50%; 
     } 
     .leftFloat { 
      float: left; 
      margin-right: 1em; 
      width: 18%; 
     } 
     fieldset { 
      border: none; 
      float: left; 
      width: 40%; 
     } 
    </style> 
</head> 
<body> 
    <h1>Title</h1> 
    <p>blah blah blah blah blah blah</p> 
    <form> 
    <fieldset> 
     <label for="ingredient">Ingredient:</label> 
     <input type="text" id="ingredient" /> 
    </fieldset> 
    </form> 
    <div id="blocks"> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
    </div> 
</body> 
</html>

來源

2011-02-12 00:20:40 mark123

獲得了一堆的div正確排隊是浮動一個div右內

回答

相關問題