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

概述我试图完成这个： 但是我无法让两个中间的角色玩得很好.如果我们将它们设置为相对数字(30％和70％),它将“工作”,但是当用户更改浏览器窗口宽度时,左侧div会更改大小. #floatitleft{width:30%; float:left;} #floatitright{width:70%; float:left;} 我想要的是,如图所示 #floatitleft{width:300px; f 我试图完成这个：

但是我无法让两个中间的角色玩得很好.如果我们将它们设置为相对数字(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 /></div> <!-- Close Wrapper --><div ID="bottommer">test</div>

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

解决方法 这不会按预期工作吗？

#floaTitleft{    wIDth:300px;    float:left;}#floatitright{    margin-left: 300px;}

总结

以上是内存溢出为你收集整理的html – 两个div：一个固定,另一个拉伸全部内容，希望文章能够帮你解决html – 两个div：一个固定,另一个拉伸所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。