HTML/CSS将div设置为兄弟的高度

发布时间：2020-12-14 22:26:10 所属栏目：资源来源：网络整理

导读：我有三分之二的2 div。一个被包含的div被浮动，另一个浮动了。我想要2个兄弟姐妹们总是处于同一个高度，但是有一个问题。到目前为止，我只是在Firefox中查看该页面，并且认为在使用至少一个浏览器后，我会担心任何跨浏览器问题。这是标记： div id="main-co

我有三分之二的2 div。一个被包含的div被浮动，另一个浮动了。我想要2个兄弟姐妹们总是处于同一个高度，但是有一个问题。到目前为止，我只是在Firefox中查看该页面，并且认为在使用至少一个浏览器后，我会担心任何跨浏览器问题。

这是标记：

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

这是CSS：

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border             { border: solid 1px #000; }

如果#left-div中的内容超过500px，则#right-div不会展开匹配。在一个例子中，我试过，Firefox表示#主容器的计算样式高度为804px，#left-div的计算样式高度为800px，#right-div的计算样式高度为586.2px，如它已经扩展到适合自己的内容。

我明白我可能会这样做错了，如果这是一个重复的问题，那么我很抱歉，但我不太确定要搜索什么。

解决方法

我可以把我的大脑全部放在我想要的位置，但是我认为这只能使用表行为来解决，即使用< table> s(如果需要是 IE6 and IE7 compatible)或显示：table / table-row / table-cell这是实际上相同的事情，但不会让你在同伴面前尴尬，因为表是邪恶的;)。

我会去一张桌子

随意证明我的错，并发布一个健全的CSS解决方案，我会很高兴！

（编辑：李大同）

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