Html 在其他两个大小不同的div元素下面放置一个div
希望将底部(绿色)容器放置在左侧和右侧容器(红色和蓝色)的下方,但仍将其保留在主(黑色)容器中。无法让它工作。有什么建议吗?(): Html 在其他两个大小不同的div元素下面放置一个div,html,css,Html,Css,希望将底部(绿色)容器放置在左侧和右侧容器(红色和蓝色)的下方,但仍将其保留在主(黑色)容器中。无法让它工作。有什么建议吗?(): 在div.bottom_容器中添加这两个属性。希望你得到了你所期望的这应该将左侧容器的高度调整为除100px之外的所有高度,并将绿色容器放在整个容器的底部 div.bottom_container { width: 100%; height: 100px; background: green; position: absolute
在div.bottom_容器中添加这两个属性。希望你得到了你所期望的这应该将左侧容器的高度调整为除
100px
之外的所有高度,并将绿色容器放在整个容器的底部
div.bottom_container {
width: 100%;
height: 100px;
background: green;
position: absolute;
bottom: 0;
}
div.left_container {
position:absolute;
bottom: 100px;
top: 0;
width: 220px;
background: red;
}
你的左容器设置为最小高度:100%,那么你怎么能期望在它下面放置一些东西呢?我需要左容器来填充剩余的高度,这是我需要解决的问题。有什么想法吗?这会导致底部容器从主容器中掉落。我需要左容器具有流体高度,此时如果我在左容器中放置更多内容,它会被剪裁:有什么想法吗?您可能真的想要这样的东西,使用
float:left代码>和清除:两者都有代码>:
div.main_container {
background: #000;
border: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
width: 100%;
min-height: 400px;
margin: auto;
position: relative;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
background: red;
margin: 0;
min-height: 100%;
padding: 0;
}
div.right_container {
position: relative;
margin-left: 220px;
width: 715px;
height: 100px;
background: blue;
}
div.bottom_container {
width: 100%;
height: 100px;
background: green;
}
position:fixed;
bottom:0px;
div.bottom_container {
width: 100%;
height: 100px;
background: green;
position: absolute;
bottom: 0;
}
div.left_container {
position:absolute;
bottom: 100px;
top: 0;
width: 220px;
background: red;
}