html – 两个div:一个固定,另一个拉伸

前端之家收集整理的这篇文章主要介绍了html – 两个div:一个固定,另一个拉伸前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图完成这个:

但是我无法让两个中间的角色玩得很好.如果我们将它们设置为相对数字(30%和70%),它将“工作”,但是当用户更改浏览器窗口宽度时,左侧div会更改大小.

#floatitleft{width:30%; float:left;}
 #floatitright{width:70%; float:left;}

我想要的是,如图所示

#floatitleft{width:300px; float:left;}
 #floatitright{width:100%; float:left;}

但这会导致“floatitright”结束在floatitleft之下.如果我把它设置为70%,那么它最终会在“floatitleft”的右边,但是当我更改浏览器大小时,它会再次下降.该怎么办?

更新:
最后我结束了:

#topper{
    height:100px;
    width:100%;
    background-color:blue;
}
#wrapperz{
    height:inherit;
    width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
    width:300px;
    float:left;
}
#wrapperz #floatitright{
    margin-left: 300px;
    min-width:300px;
}
#bottommer{
    height:100px;
    width:100%;
    background-color:red;
}

哪些将用作:

<div id="topper">
test
</div>

<div id="wrapperz">

<div id="floatitleft">
<p> Stuff </p>
</div>

<div id="floatitright">
<p> Stuff </p>
</div>

<div style="clear: both;"/>

</div> <!-- Close Wrapper -->

<div id="bottommer">
test
</div>

请注意,这不是正确的HTML,但它只是作为我的例子的解决方案.另外,“div style =”clear:both“如果你尝试这样做是特别重要的,因为没有使用这个页面解决这个问题,因为包装器没有正确拉伸,但是Mark提供了一个我认为是更好的/更清洁的选择下面.

解决方法

这不会按预期工作吗?
#floatitleft{
    width:300px;
    float:left;
}
#floatitright{
    margin-left: 300px;
}
原文链接:https://www.f2er.com/html/230189.html

猜你在找的HTML相关文章