如何包裝div？

基本上，我想外層的div外內的div根據外div的寬度，而這又膨脹和根據瀏覽器窗口的寬度，像這樣的合同來包裝：如何包裝div？

.---------------------. 
|      | <-- Browser Window 
| .-----------------. | 
| | ,-, ,-, ,-, | | 
| | |X| |X| |X| | | 
| | `-` `-` `-` | | 
| |     | | 
| | ,-, ,-, ,-, | | 
| | |X| |X| |X| | | 
| | `-` `-` `-` | | 
| `-----------------` | 
|      | 
`---------------------` 

.-------------------------------. 
|        | <-- Browser Window enlarged 
| .---------------------------. | 
| | ,-, ,-, ,-, ,-, ,-, | | 
| | |X| |X| |X| |X| |X| <----- Inner divs wrap around accordingly, as if 
| | `-` `-` `-` `-` `-` | |  they are text 
| |       | | 
| | ,-,      | | 
| | |X|      | | 
| | `-`      | | 
| `---------------------------` | 
|        | 
`-------------------------------`

什麼會是最好的（就開發者時間而言最簡單的方式）來實現這一目標？

來源

2012-07-17 wrongusername

設置此塊 - display: inline-block，和主容器一些寬度...

.div { 
    display: inline-block; 
    }

http://jsfiddle.net/guh5Z/1/

來源

2012-07-17 07:02:27 Lukas

這比浮動左邊的解決方案更好。因爲浮動元素會彈出外部div，除非你指定溢出：隱藏在外部div上 – 2012-07-17 07:06:39

好抓，@WouterH！ 'inline-block'應該展開包含元素。我認爲jsFiddle http://jsfiddle.net/guh5Z/2/更好地描繪了差異，因爲身高並不固定。 – 2012-07-17 07:13:01

我覺得這是更「未來」的解決方案，當然你會遇到IE執行較低的問題，但這是一種妥協;） – Lukas 2012-07-17 07:54:43

您可以將float: left應用於每個內部div。請參閱以下的jsfiddle爲例（嘗試調整結果窗格中看到的行爲）：

的jsfiddle（實況）：http://jsfiddle.net/guh5Z/

源代碼：

<html> 
<head> 
    <style type="text/css"> 
     #outer { 
      width: 90%; 
      height: 90%; 
      margin: 5%; 
      overflow: auto; 
      background-color: red; 
     } 

     .inner { 
      float: left; 
      width: 150px; 
      height: 150px; 
      margin: 20px; 
      background-color: blue; 
     } 
    </style> 
<body> 
    <div id="outer"> 
     <div class="inner">X</div> 
     <div class="inner">X</div> 
     <div class="inner">X</div> 
     <div class="inner">X</div> 
     <div class="inner">X</div> 
     <div class="inner">X</div> 
    </div> 
</body> 
</html>

來源

2012-07-17 06:57:56

我的jsfiddle工作。否則：http://tinkerbin.com – kay 2012-07-17 07:05:50

現在工作;不知道那裏發生了什麼。添加了jsFiddle鏈接。 – 2012-07-17 07:06:23

請在您的答案中包含代碼，因爲jsfiddle可能會在某天停機:) – 2012-07-17 07:08:46

如果您要放置文字，您可以使用<ul>。事情是這樣的：

CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    width: 100px; 
    height: 120px; 
    border: 1px solid; 
    float: left; 
    margin: 5px; 
}

HTML：

<ul> 
    <li>Random text here</li> 
    <li>Random text here</li> 
</ul>

我希望幫助

來源

2012-07-17 07:05:36

這與Jonathan Newmuis的答案中提出的方法相同。 – kay 2012-07-17 07:10:01

哦，直到現在我還沒有看到Jonathan的答案:) – 2012-07-17 07:27:24

不幸的是，它不是文本，而是包含在一個div中的文本和信息的組合:(謝謝你的建議！ – wrongusername 2012-07-17 16:31:20

如何包裝div？

回答

相關問題