HTML DIV溢出，如何停止？
[英]HTML DIV Overflowing, How To Stop?
问题描述
What I'm trying to achieve: 
我想要实现的目标：
I'm trying to position three elements alongside each other. 我试图将三个元素放在一起。 Two content boxes with a dividing div in between. 两个内容框，中间有div。 I am getting overflow problems with the right content box. 我正在使用正确的内容框出现溢出问题。 It always appears below the two other divs. 它总是出现在另外两个div之下。
It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it. 中心分隔器的位置可能存在问题，但我想不出更好的定位方法。
Codepen of what I currently have: http://codepen.io/anon/pen/vNNKpB?editors=110 我现在拥有的Codepen： http ：//codepen.io/anon/pen/vNNKpB？editors = 110
Here's my CSS: 这是我的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;
}
4 个解决方案
解决方案1
1 2015-09-10 12:39:26
You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; 您可以在.centre-divider div中添加另一个div，它将是垂直线，然后只需设置一个display: inline-block; on .centre-divider : 在.centre-divider ：
body { font-family: Garamond, serif; } h1 { font-family: Minion Pro, serif; text-align: center; font-size: 80px; } .contact { height: 300px; } .container { width: 70%; margin-left: 15%; margin-right: 15%; } .centre-divider { width: 50%; display: inline-block; height: 300px; } .centre-divider > div { width: 1px; height: inherit; background: gray; margin: 0 auto; } .left-box { width: 25%; float: left; height: 300px; background-color: lightgray; } .right-box { float: right; width: 25%; height: 300px; background-color: lightgrey; }
<body> <header> <h1>Heading</h1> </header> <div class="contact"> <div class="container"> <div class="left-box"> </div> <div class="centre-divider"> <div></div> </div> <div class="right-box"> </div> </div> </div> </body>
You will have to adjust the widths but you get the idea. 你必须调整宽度，但你明白了。
解决方案2
1 已采纳 2015-09-10 12:55:31
If you use width in % for .container you should use width in % for the child elements. 如果对.container使用％的宽度，则应使用％元素的宽度作为子元素。 Otherwise, you always will have errors on the different screen size. 否则，您将始终在不同的屏幕尺寸上出错。
The new way of the positioning you want is to use flexbox without floats: 您想要的新定位方法是使用不带浮动的flexbox ：
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
/* ... another styles here */
}
Demo: http://codepen.io/anon/pen/RWWROr 演示： http ： //codepen.io/anon/pen/RWWROr
But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/ 但是如果你使用flexbox不要忘记浏览器前缀，你可以在这里获取它们http://autoprefixer.github.io/
解决方案3
0 2015-09-10 12:44:47
Just Add this CSS: 只需添加此CSS：
body { font-family: Garamond, serif; } h1 { font-family: Minion Pro, serif; text-align: center; font-size: 80px; } .contact { height: 300px; } .container { width: 70%; float:left; margin-left: 15%; margin-right: 15%; } .centre-divider { width: 0.1%; float:left; margin-left: 5%; margin-right: 4%; height: 300px; background-color: darkgray; } .left-box { width: 400px; float: left; height: 300px; background-color: lightgray; } .right-box { float: left; width: 400px; height: 300px; background-color: lightgrey; }
解决方案4
0 2015-09-10 12:58:39
you can use display: inline-block; 你可以使用display: inline-block; instead of floating the elements. 而不是浮动元素。 when you text-align: center on the .contact div, then the .left-box , .right-box , and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive to the width of the screen. 当你将text-align: center放在.contact div上时，那么.left-box ， .right-box和.centre-divider会自动以间距为中心（所以你不必自己计算它，它仍然是响应的到屏幕的宽度。
body { font-family: Garamond, serif; } h1 { font-family: Minion Pro, serif; text-align: center; font-size: 80px; } .contact { height: 300px; } .container { text-align: center; } .centre-divider { width: 2px;; display: inline-block; margin-left: 50px; margin-right: 50px; height: 300px; background-color: darkgray; } .left-box { width: 200px; display: inline-block; height: 300px; background-color: lightgray; } .right-box { display: inline-block; width: 200px; height: 300px; background-color: lightgrey; }
<body> <header> <h1>Heading</h1> </header> <div class="contact"> <div class="container"> <div class="left-box"> </div> <div class="centre-divider"></div> <div class="right-box"> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.