html – 如何使左div扩展而右div具有恒定宽度？

2023年5月8日 220次阅读

因此,正如标题所说,我想将两个div放在一起,如果窗口展开,则左边的一个展开,而右边的一个则保持恒定的宽度.

这是我到目前为止所得到的：

<body>
    <div id="content" style="background-color: red">
        <div id="left" style="margin-right: 100px; background-color: blue">
            This</br>is</br>left.
        </div>
        <div id="right" style="float: right; width: 100px; height: 100px; background-color: green">
            This</br>is</br>right.
        </div>
        <div style="clear:both"></div>
    </div>
</bod>

产生这个：

理想情况下,绿色正方形和蓝色正方形应使其顶部彼此对齐.我找到的一个解决方案是在绿色div上设置负边距顶部设置,这有效…但只要蓝色div不会改变高度.不幸的是,蓝色div实际上可以在我的情况下改变高度.

关于我如何解决这个问题的任何想法？我在理解CSS定位的复杂性方面遇到了一些困难:(

最佳答案 如果你可以使用position：absolute,你可以这样做：

<div class="left">This is the left box.</div>
<div class="right">This is the right box.</div>

而CSS：

.left {
  position: absolute;
  left: 0px;
  right: 100px;
}

.right {
  position: absolute;
  right: 0px;
  width: 100px;
}

http://jsfiddle.net/Q2TKU/

点赞