HTML DIV溢出,如何停止？

2023年12月29日 257次阅读

我想要实现的目标：
《HTML DIV溢出,如何停止？》

我试图将三个元素放在一起.两个内容框,中间有div.我正在使用正确的内容框出现溢出问题.它总是出现在另外两个div之下.

中心分隔器的位置可能存在问题,但我想不出更好的定位方法.

我目前拥有的Codepen：
http://codepen.io/anon/pen/vNNKpB?editors=110

这是我的CSS：

.contact {
height: 300px;
}

.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}

.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}

.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}

.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}

最佳答案 如果对.container使用％的宽度,则应使用％元素的宽度作为子元素.否则,您将始终在不同的屏幕尺寸上出错.

您想要的新定位方法是使用不带浮动的flexbox：

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* ... another styles here */
}

演示：http://codepen.io/anon/pen/RWWROr

但是如果你使用flexbox不要忘记浏览器前缀,你可以在这里获取它们http://autoprefixer.github.io/

点赞