1

如果我有更多的 div 漂浮在容器 div 中，如果它们不适合一行，我如何在它们之间水平画线？

例如，如果：

<div id="main">
  <div id="div1" style="float:left; width: 80px;"></div>
  <div id="div2" style="float:left; width: 80px;"></div>
  <div id="div3" style="float:left; width: 80px;"></div>
</div>

主 div 的“宽度”变得小于 240 像素，则包含的 3 个 div 将显示为两行。在这种情况下，我想在这两行之间绘制全长线。

4

2 回答 2

1

如果 div 的高度是已知的，最好的方法是在“主”id 中有一个重复的背景图像，如下所示：

#main {
background-image:url('horizontal_line.gif');
background-repeat:repeat;
}

诀窍是，horizo​​ntal_line.gif 的高度必须高于 div 单位的高度，这样如果只有一行，该行将被隐藏。

Horizo​​ntal_line.gif（或 png）应该是一条宽度为 1px，高度为例如 100px 的直线，其中 99px 是透明的，底部的 1px 是线条的颜色（假设您希望线条的粗细为为 1 像素）..

于 2013-03-20T12:21:05.040 回答
0

如果你想用普通的css和不同的高度来做，你可以这样做（取决于你的页面结构，你可能需要做一些更改），它确实添加了一些额外的html代码，但取决于你想要做什么它是一种快速灵活的解决方案。

因为overflow: hidden它不会在所有情况下都有效。

css

#main {
    overflow: hidden; //<-- hides the line if the element is in the frist row
}

.line {
    position: relative;
    font-size: 0px;
    top: -1px; //<-- hides the line if the element is in the frist row
    left: 0px;
    width: 240px; //<-- the full width of the line
    border-top: 1px solid black;
}

html

<div id="main">
    <div id="div1" style="float:left; width: 80px;">
        <div class='line'></div>
        aaa<br>aaaaa
    </div>
    <div id="div2" style="float:left; width: 80px;">
        <div class='line'></div>
        aaa<br>aaaaa
    </div>
    <div id="div3" style="float:left; width: 80px;">
        <div class='line'></div>
        aaaa<br>aaaaa<br>aaaaaa
    </div>
</div>
于 2013-03-20T12:43:56.770 回答