avoiding div(s) wraps
I am trying to create a div parent container having fixed width (say width: 300px), which contains divs (say width: 80px). But when the container get 4 divs (i.e. 80*4=320px > 300px), it wraps the forth div. I want that there would be no wrapping of divs, instead we can perform horizontal scrolling, so that container width remain 300px, and if divs get out of vision, we may horizontally scroll to see all divs.
<html>
<body>
<div id="parent" style="width:300px;overflow:scroll;">
<div class="child" style="width:80px; float:left;">lorem</div>
<div class="child" style="width:80px; float:left;">ipsum</div>
<div class="child" style="width:80px; float:left;">dolore</div>
<div class="child" style="width:80px; float:left;">开发者_运维百科lorem</div>
</div>
</body>
</html>
.child {
display: inline-block;
}
#parent {
white-space: nowrap;
}
Here is example: http://jsfiddle.net/qnpGm/
UPDATE: in ie6/ie7 this will work only on elements with a natural display: inline. Thanks for comments :)
try adding white-space:nowrap; to your #parent style. Haven't tested this on your code, but I've used this in similar situations where I've needed to expand a div containing a number of child divs without setting a width for the parent.
Hence "inline-block" will come up with problems regarding crossbrowser-compactibility (IE 6), I guess this isn't possible without a bit of extra markup.
So let's assume "parent" is your viewport. Then you'll need a container, wrapped around the "child"-elements, having the same width as all of them - in your case 320px. You can calculate the with using either server-side languages or javascript.
<html>
<body>
<div id="parent" style="width:300px;overflow:scroll;">
<div id="view" style="width:320px;">
<div class="child" style="width:80px; float:left;">lorem</div>
<div class="child" style="width:80px; float:left;">ipsum</div>
<div class="child" style="width:80px; float:left;">dolore</div>
<div class="child" style="width:80px; float:left;">lorem</div>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论