不要包住一行div

Question

如何创建一个012bdiv一组相邻，并使它们不包装，无论它们存在多少或它们的宽度如何。如果它们一起比视口宽，则应该出现x-scroll。

这些div内的内容应正常换行。

CSS只会是好的。

Answer 1

样式父元素white-space: nowrap;，虽然这只适用于display: inline（或display: inline-block;）元素。考虑下面的HTML：

<div id="parent"> 
    <div class="child"></div> 
    <!-- there's quite a lot of these... --> 
    <div class="child"></div> 
</div> 

而CSS：

#parent { 
    white-space: nowrap; 
} 

#parent .child { 
    display: inline-block; 
    /* there's some other CSS for aesthetics */ 
} 

JS Fiddle demo。

不幸的是，我不认为有是强迫float -ed元素不换行到新行。

要保留，或者更确切地说，力正常换行的子元素，你必须明确地过骑继承并设置white-space: normal（以及可能的话，定义一个width或max-width）

/* other CSS remains intact */ 

#parent .child { 
    display: inline-block; 
    /* irrelevant/aesthetic CSS */ 
    white-space: normal; 
    max-width: 8em; 
} 

JS Fiddle demo。

Answer 2

几个要素：http://jsfiddle.net/thirtydot/A8duy/

许多元素：http://jsfiddle.net/thirtydot/A8duy/1/

HTML：

<div class="block-container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
</div>​ 

CSS：

.block-container { 
    text-align: right; 
    white-space: nowrap; 
    float: left; 
    width: 100%; 
    margin-bottom: 1em; 
    border: 1px solid red; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
.block-container > div { 
    width: 50px; 
    height: 50px; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    text-align: left; 
    white-space: normal; 
    border: 1px solid blue; 
}