我希望在页面中放置三个
如何让三个div并排浮动,并占据100%的宽度而不出现问题?
div { width:33%; border: 3px solid #333;}
,但是总宽度似乎超过了100%,导致失败。如何让三个div并排浮动,并占据100%的宽度而不出现问题?
.left {
float:left;
width:33.3%;
border: 3px solid #333;
}
.box-sizing { box-sizing: border-box; }
请查看Fiddle演示,您可以调整结果框的大小,它仍然完美。 :)
<div class="outer">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
</div>
样式:
// Color and height properties are just here for demonstration purposes.
.outer {
position: relative; // make the parent a relative reference point to its children
// overflow: hidden;
height: 40px;
background: yellow;
}
.box {
position: absolute; // position all children absolute but relative to the parent
width: 33.3%;
border: 5px solid blue;
}
.one {
left: 0; // first box to the left
background: red;
}
.two {
left: 33.3%; // second box placed according to the width of the first box
background: cyan;
}
.three {
left: 66.6%; // third box placed according to the sum of widths of the first two boxes
background: purple;
}
要解决这个问题,你可以简单地使用box-sizing,并确保重置所有样式。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<style type='text/css'>
* { margin:0; padding:0; border:0; outline:0; }
.thirdContainer { float: left; display: block; width: 33.33%; box-sizing: border-box; height: 100px;}
</style>
</head>
<body>
<div class="thirdContainer" style="background: yellow;"></div>
<div class="thirdContainer" style="background: yellowgreen;"></div>
<div class="thirdContainer" style="background: blue;"></div>
</body>
</html>