我想实现这样的定位(这些是按钮但没关系):
|-------|-------|-------|-------|
| | | small | |
| | |-------| |
| big | big | small | big |
|-------|-------|-------|-------|
所以我将其称为从上到下,从左到右定位 - 如果有足够的位置,浏览器应该将元素放在前一个元素的下方,否则 - 放在它旁边。我不知道会有多少元素,也不知道它们的宽度等等 - 它必须非常灵活。
经过短暂的研究,我发现了 display: flex
。它看起来很有前途(我不需要与不同的浏览器兼容 - 我的计划是使用 html 做本地应用程序)但是有一个问题。
注意:我不希望它占据 100% 的宽度——它应该只占用它需要的空间。 float: left
在 parent 上似乎是完美的。
在简单的情况下:大按钮、大按钮、小按钮、大按钮 - 它工作完美。当我再添加一个小按钮时出现问题 - 它显示正确 - 在前一个按钮下 BUT 父级更大!
这是我得到的代码(这里是 fiddle ,显示了这两种情况:http://jsfiddle.net/h7SK7/):
<div class="container">
<button>Lorem</button>
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
div.container {
height:50px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
float:left;
}
button {
height:50px;
}
button.small {
height:20px;
}
谁能帮帮我?
最佳答案
尝试将小按钮放在一个 div 中。像这样JSFiddle
<div class="container">
<button>Lorem</button>
<div class="box">
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
</div>
.box{
width:70px;
}
关于html - CSS:Flex Children 的宽度和 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20734812/