HTML和CSS：左边是2个DIVS,右边是1个独立的DIV_html-js-css

概述我没有找到我这个具体案例的答案,所以我决定提出一个新问题.我希望页面左侧有2个DIV(固定宽度),右侧有一个DIV,占据页面宽度的其余部分.右边的单个DIV也应该有独立的高度(当它的高度增加时,它不应该影响左边DIV的高度或位置).这样的事情就是我想要的：这是HTML代码： <body> <div class="div1">Div1</div> <div class="div3" 我没有找到我这个具体案例的答案,所以我决定提出一个新问题.我希望页面左侧有2个div(固定宽度),右侧有一个div,占据页面宽度的其余部分.右边的单个div也应该有独立的高度(当它的高度增加时,它不应该影响左边div的高度或位置).这样的事情就是我想要的：

这是HTML代码：

<body>    <div >div1</div>    <div >div3</div>    <div >div2</div></body>

这是我现在拥有的CSS：

div.div1 {    float: left;    height: 400px;    margin-right: 10px;    wIDth: 200px;}div.div3 {    height: 425px;    overflow: hIDden;}div.div2 {    clear: left;    float: left;    height: 15px;    margin-top: 10px;}

唯一的问题是div2的顶部位置受到div3高度的影响,我得到这样的结果：

解决方法现在你可以使用溢出的正确内容：隐藏而不与左边的div冲突.

检查一下：
http://jsfiddle.net/6UyTr/1/

div.left-content { margin-right: 10px; overflow: hIDden; wIDth: 200px; float: left; }

总结

以上是内存溢出为你收集整理的HTML和CSS：左边是2个DIVS,右边是1个独立的DIV全部内容，希望文章能够帮你解决HTML和CSS：左边是2个DIVS,右边是1个独立的DIV所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1081589.html

HTML和CSS：左边是2个DIVS,右边是1个独立的DIV

发表评论

评论列表（0条）