Question

如何创建一组float:right div，彼此相邻并使它们不包裹，无论它们存在多少或它们有多宽。如果它们在一起比视口宽，那么应该出现x滚动。

这些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;
}

不要包装div行

2 个答案: