It is necessary to display the blocks #main div
horizontally, so as not to transfer to the new line, if reached the limit width of the block #main
.
I tried float: left; display: inline-block;
1, Authority 100%
HTML
& lt; div id = "main" & gt;
& lt; div & gt; & lt; / div & gt;
& lt; div & gt; & lt; / div & gt;
& lt; div & gt; & lt; / div & gt;
& lt; div & gt; & lt; / div & gt;
& lt; / div & gt;
css
& lt; style & gt;
* {
margin: 0px;
Padding: 0px;
}
html, body {
HEIGHT: 100%;
}
Body {
Background-Color: #CCC;
}
Div {
border: 1px solid #fff;
margin: 10px;
Text-Align: Center;
}
#main {
width: 1119px;
Height: 150px;
Overflow: Hidden;
}
# Main & gt; div {
width: 150px;
height: 120px;
Display: INLINE-BLOCK;
}
& lt; / style & gt;
2
Is not it easier for all three blocks to set the width and height and then just add all float: left
3
It is very easy: the blocks display: inline-block; Parent white-space: nowrap; . Thus, we do not permit the transfer of lines.