html – 使用CSS显示多行中的元素

发布时间：2020-12-14 18:35:30 所属栏目：资源来源：网络整理

导读：我有一个固定宽度的容器 div显示一个或多个小部件 div s.我希望它看起来像这样： - 灰色块是小部件,红色边框是容器简化,我在HTML中的结构如下所示： div id="container" div id="widget1"1/div div id="widget2"2/div div id="widget3"3/div div id="widget

我有一个固定宽度的容器< div>显示一个或多个小部件< div> s.我希望它看起来像这样：

< - 灰色块是小部件,红色边框是容器简化,我在HTML中的结构如下所示：

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
</div>

注意事项

>小工具将具有固定的高度,例如100px的
>小部件将具有固定宽度,例如100px但它们也可能是该宽度的倍数(加上任何边距交叉 – 参见小工具1)
>小部件应与边距(或类似)间隔良好,例如10px的
>我不知道会有多少个小部件(用户可以根据需要分配多少个小部件).
>容器是固定宽度但没有任何“视觉”样式(红色边框用于演示)
>解决方案必须在现代浏览器(和MSIE7)中工作,理想情况下是纯CSS.

由于考虑4.我不能分配额外的标记,例如行div,类(.first-child,.last-child)和因为2.：nth-??child不能正常工作AFAIK.

我尝试过的事情

小部件上的margin-left：第一个子设置margin-left：0将不会正确显示新行.

小部件上的margin-right：last-child setting margin-right：0第一行强制容器div更宽和last-child isn’t supported until MSIE9.

相等的左右边距(例如边距：0 5px 10px)再次迫使容器变宽.

溢出 – 在我脑海里工作得很好！与边距或填充无关.

有没有办法在CSS中这样做？

http://jsfiddle.net/agtb/VHXGT/

解决方法

我相信你的想法太复杂了:-)

如果我理解正确,您不需要对单独的小部件进行任何特殊处理.只需给小部件提供一半间距的边缘,并且容器具有相同的余量但是为负.

#container {
    width: 440px;
    margin: -5px;
}

#container div {
    background-color: gray;
    height: 100px;
    width: 100px;
    float: left;
    margin: 5px;
}

见http://jsfiddle.net/SGdG3/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!