Question

我有两个div左侧浮动，以便它们彼此相邻。它们都填充了动态内容，因此对于某些用户来说，左边的div可能有更多的项目和高度，而对于其他用户，右边的div可能更长。

我想在两个div之间放置一个边框，这样如果左边的div更长，它就在左边的div上，如果右边的div更长，它就是border-left。

我的想法是在运行时执行此操作，以便php代码首先检查每个div中的项目数，然后继续将相应的行样式标记添加到相应的div。它可能会工作，但我想知道是否有更简单的方法通过CSS进行此操作？

Answer 1

你可以做的是将两个div设置为重叠边框宽度，并在最左边的浮点数上设置border-right，在最右边的浮点数上设置border-left和position: relative。然后该线看起来会以最长的线增长，但实际上它是2个重叠的边界。

我在jsfiddle上设置了两个例子，你可以看到它们。但我在这附加CSS。我使用了非常明显的颜色，只是为了清楚我所展示的内容。

链接到JSfiddle完整代码：

http://jsfiddle.net/8nU6K/1/

http://jsfiddle.net/8nU6K/2/

.container{
    overflow:hidden; 
    background-color:red; 
    width:350px;
}

.left, .right{
    padding: 3px;
    float: left;
    margin: 0;
    background-color:white;
    width: 150px;
}
.left{
    border-right:10px solid green;
}

.right {
    position:relative; 
    left:-10px; 
    border-left:10px solid blue;  
}

Answer 2

不要试着猜测服务器上会有多大的东西，这只会导致沮丧和错误。一个简单的客户端解决方案是这样做：

在左侧框中放置左边框，在左侧框中放置右边框。
使边框具有相同的宽度和颜色。
在右侧框中添加一个与边框宽度相同的左边距。
在框内使用填充来模拟它们之间的间距。

演示HTML：

<div class="a">
    <ul>
        <li>Where</li>
        <li>Is</li>
        <li>Pancakes</li>
        <li>House</li>
    </ul>
</div>
<div class="b">
    <ul>
        <li>No</li>
        <li>One</li>
        <li>Uses</li>
        <li>The</li>
        <li>Two</li>
        <li>Cent</li>
        <li>Stamps</li>
    </ul>
</div>

<br style="clear: both;"><br>

<div class="a">
    <ul>
        <li>No</li>
        <li>One</li>
        <li>Uses</li>
        <li>The</li>
        <li>Two</li>
        <li>Cent</li>
        <li>Stamps</li>
    </ul>
</div>
<div class="b">
    <ul>
        <li>Where</li>
        <li>Is</li>
        <li>Pancakes</li>
        <li>House</li>
    </ul>
</div>

还有一些CSS（边框颜色只是为了说明）：

.a {
    float: left;
    border-right: 1px solid red;
    padding-right: 10px;
}

.b {
    float: left;
    border-left: 1px solid green;
    padding-left: 10px;
    margin-left: -1px;
}

一个实例：http://jsfiddle.net/ambiguous/X8J5p/

如何确定div的高度并在div上设置更高的高度？

2 个答案: