当前位置：文江博客话题详情

CSS：如何实现与内容最多的列的高度相匹配的两个列高？

发布于 2024-12-27 06:56:14 字数 329 浏览 2 评论 0原文

我从我的网站上获取了代码并对其进行了简化，然后将其放入 jsfiddle 中以更好地描述我的问题。

http://jsfiddle.net/5vMHC/3/

所以我想做的是将左列与右列分开的边框线，但是我希望该线延伸到内容最多的列的高度。按照我现在的设置方式，我将 border-left 放在右列内容上，因此如果内容小于左列中的内容，它只会拉伸到右列的高度。

如何让它拉伸到最长内容的长度？我是否必须使两列等于最长的列？我该怎么做呢？我的html结构还好吗？谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

埖埖迣鎅 2025-01-03 06:56:14

最简单的方法是添加一个带有边框的 filler 类型元素并将其绝对定位：

CSS

.filler {
    border-right:1px solid #CDE;
    width: 209px;                   /* width of #sub_page_left_column */
    position: absolute;
    bottom: 0;
    top: 0;
}

/* add position relative so filler is positioned in respect to this div */
#content {
    ....
    position: relative;           
    ....
}

HTML

<div id="content">
    <!-- add the new filler element -->
    <div class="filler"></div>  
    <div id="sub_page_left_column">...</div>
    <div id="sub_page_right_column">...</div>
</div>

Right long： http://jsfiddle.net/5vMHC/5/

留下更长的时间： <一href="http://jsfiddle.net/5vMHC/6/" rel="nofollow">http://jsfiddle.net/5vMHC/6/

The easiest way to do this is to add a filler type element with the border and position it absolutely:

CSS

.filler {
    border-right:1px solid #CDE;
    width: 209px;                   /* width of #sub_page_left_column */
    position: absolute;
    bottom: 0;
    top: 0;
}

/* add position relative so filler is positioned in respect to this div */
#content {
    ....
    position: relative;           
    ....
}

HTML

<div id="content">
    <!-- add the new filler element -->
    <div class="filler"></div>  
    <div id="sub_page_left_column">...</div>
    <div id="sub_page_right_column">...</div>
</div>

Right longer: http://jsfiddle.net/5vMHC/5/

Left longer: http://jsfiddle.net/5vMHC/6/

回复收藏 0 原文