Preventing float wrapping without setting parent width_问答_开发者

Preventing float wrapping without setting parent width

开发者 https://www.devze.com 2022-12-30 17:08 出处：网络

I would like to have several items stack horizontally infinitely (in one row), without setting the width of their parent container. I\'m fully aware that setting the container div to width:1000px; wil

I would like to have several items stack horizontally infinitely (in one row), without setting the width of their parent container. I'm fully aware that setting the container div to width:1000px; will make them stack, but for various reasons I do not want to use this solution. Are there any alternatives?

<html>
<head>
<style type="text/css">
div {white-space:nowrap; clear:none;}
div div {width:300px; border:1px solid black; float:left; display:inline;}
</style>
</head>
<body>
<div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
    <div>x</div>
</div>
</body>
</html开发者_如何转开发>

  display: inline;
  white-space: nowrap;
  float: none;

and on a parent element you'll need

  overflow:hidden;

It's not necessarily a robust solution, but if you can get exactly 300px of content in each of the inner divs, you could remove the float and width properties. Maybe include a 1x300 transparent image, and make sure you don't have too much text? Maybe

div.dummycontent {float:left; width:200px; background-color:Blue; }
<div class="dummycontent">&nbsp;</div>

Or if the reasons for not setting a width are primarily along the lines of not knowing until runtime what the size will need to be, maybe calculate with JavaScript, and set it then?