Question

我有两列布局......设计需要一个边框来划分它们。我很困惑，在哪里应用边框（左边的）或右边的边框，但它需要是动态的，具体取决于哪个有更多的内容。

我是否必须求助于容器div？有人有例子吗？我正在尝试调整背景的例子来做到这一点，但无济于事。

Answer 1

我不确定我是否理解这个问题。

但我会这样做

div container
+ div left content
+ div right content
+ div line

通过设置绝对线和容器相对值。因此，您可以为该行留下50％的左侧位置和100％的高度，因此它始终与内容一样长。

以下是一个示例：http://jsfiddle.net/Ej2Gy/

Answer 2

http://jsfiddle.net/jzsQh/

相当简单：

<style type="text/css">
    .wrapper {
        border: 1px solid #000;
        float: left;
        margin: 10px;
    }
    .left-column, .right-column {
        float: left;
        padding: 5px;
    }
    .left-column {
        border-right: 1px solid #000;
    }
    .right-column {
        border-left: 1px solid #000;
        margin-left: -1px;  // makes the borders line up
    }
    .clearfix {
        clear: both;
    }
</style>

<!-- Example: Longer Left Column -->
<div class="wrapper">
    <div class="left-column">
        Longer Left Content<br>
        Longer Left Content<br>
        Longer Left Content<br>
        Longer Left Content<br>
    </div>
    <div class="right-column">
        Shorter Right Content<br>
        Shorter Right Content<br>
    </div>
    <br class="clearfix">
</div>

<!-- Example: Longer Right Column -->
<div class="wrapper">
    <div class="left-column">
        Shorter Left Content<br>
        Shorter Left Content<br>
    </div>
    <div class="right-column">
        Longer Right Content<br>
        Longer Right Content<br>
        Longer Right Content<br>
        Longer Right Content<br>
    </div>
    <br class="clearfix">
</div>

2列布局，如何应用边框使得较高的div指示边框高度

2 个答案: