如何包装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？

回答

相关问题