我想像图片上那样排列div，但我不知道如何。
也许填充可以设置自动？
谁能帮我？
问问题
623 次
7 回答
1
<style type="text/css">
.main-container{
width:400px;
background: #007caa;
display: block
}
.block{
display: block;
display: inline-block;
width:auto;
margin:5px;
background: #dbf2fa;
padding: 10px;
}
*+html .block{
display: inline
}
</style>
</head>
<body>
<div class="main-container">
<div class="block">Development</div>
<div class="block">Designing</div>
<div class="block">Drupal</div>
<div class="block">Omega</div>
<div class="block">Drupal</div>
<div class="block">Designing</div>
<div class="block">Development</div>
<div class="block">Drupal</div>
<div class="block">Omega</div>
<div class="block">Development</div>
<div class="block">Drupal</div>
<div class="block">Omega</div>
</div>
于 2012-09-12T09:03:52.477 回答
1
一种可能有助于w3c FlexBox 模型规范的不同方法......但如果没有关于您的场景的更多细节，很难说。
于 2012-09-10T12:19:51.907 回答
1
您可以尝试使用 inline-block 执行此操作。可能是这类事情的最佳方法，但在较低版本的 IE 中并不普遍支持。
JSFiddle 示例：http: //jsfiddle.net/NdK7c/
仅供参考：您可以通过向父 UL 元素添加正数来创建每个元素之间的间距letter-spacing，然后添加letter-spacing: normal子 li 元素以纠正继承的字母间距。
更新小提琴：http: //jsfiddle.net/2suGg/1/
于 2012-09-10T12:53:05.347 回答
0
谢谢！这适用于 IE，但不适用于 Chrome .. :(
.enlarge-categores ul{
text-align: justify;
text-justify:distribute;
}
.enlarge-categores ul li{
color: white;
font-size: 14px;
display:inline;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 60px;
margin:10px;
background-color:#f39900;
}
于 2012-09-10T13:56:26.763 回答
0
我们可以使用 CSS 'display' 和 'float' 样式来排列 div 就像你提到的图像。如果使用浮动样式意味着我们必须在最后一个浮动 div 的末尾清除浮动。
请参阅链接http://jsfiddle.net/ybhR9/2/了解样式“显示”概念。
于 2012-09-10T12:25:10.103 回答
0
我假设您正在尝试实现合理的对齐（在左侧和右侧对齐）。
我建议从 Javascript 分配边距，然后让 div 内联流动。不需要漂浮。
算法：
- Whenever the container is resized
-- Create a copy of the container such that it is not user-visible but still layouted by the browser
-- Set all element margins to zero
-- Collect the elements by rows
-- For each row (except the last one, maybe)
--- Calculate the largest element margin that will not cause an overflow
--- Round down to whole pixels
--- Determine the deficit due to rounding
--- Set each element the margin, and distribute the deficit (one pixel to each)
-- Force the browser to recalculate the layout
-- Replace the container with the new one
于 2012-09-10T12:29:28.023 回答
0
您应该尝试更好的方法并从那里开始工作：
ul{
text-align:justify;
}
ul li{
display:inline;
padding:10px;
margin:10px;
line-height:60px;
background-color:orange;
white-space:nowrap;
}
于 2012-09-10T12:47:32.197 回答