Question

我正在尝试创建一个包含其他浮动div的div来调整其宽度，这样添加更多浮动div（动态使用jQuery）只会扩展div的宽度，不允许浮动div创建新行。因此，我想修复此问题，使得类grid-row的每个div仅扩展宽度，因此我将能够使用overflow: scroll滚动父grid div。我已经搜索了很多答案，似乎这是一个着名的问题。但是，没有答案解决了我的问题。

我目前正在这样做：

    <div id="grid_container">
        <div id="grid">
            <div class="grid_row">
                <div class="module" id="experience">
                    Experience
                </div>
                <div class="header">
                    Google
                </div>
                <div class="header">
                    Microsoft
                </div>
            </div>
            <div class="grid_row">
            </div>
        </div>
    </div>

CSS：

body {

}

#grid_container { 
    margin: 50px auto;
    width: 500px;
    height: 500px;
    padding: 10px;
    border: black solid 1px;
}

#grid {
    overflow:scroll;
    height: 100%;
}
.grid_row { 
    clear: both;
    height: 50px;
}
.module, .header{
    padding: 10px;
    float: left;
    border: gray solid 1px;
}

Answer 1

您可以通过使行容器浮动并使样式为“white-space：nowrap;”来实现此目的。

http://jsfiddle.net/UeNZr/3/

修改另一种方法是使每个项目内联显示并使每个网格元素浮动。 http://jsfiddle.net/UeNZr/5/

Answer 2

如果您正在制作列表，请考虑使用更具语义ul。

Demo

HTML：

  <ul class="grid">
    <li>
      <ul>
        <li>One Mississippi</li>
        <li>Two Mississippi</li>
        <li>Three Mississippi</li>
        <li>Four Mississippi</li>
        <li>Five Mississippi</li>
        <li>Six Mississippi</li>
      </ul>
    </li>
    <li>
      <ul>
         ...
      </ul>
    </li>
    <li>
      <ul>
         ...
      </ul>
    </li>
  </ul>

CSS：

.grid ul{
    margin:10px 0;
    height:42px;
    width:100%;
    overflow-x:scroll;
    background:white;
    white-space:nowrap;
}

.grid li li {
    list-style-type:none;
    display:inline-block;
    padding:10px;
    border:1px solid gray;
    height:20px;
}

当添加更多浮动div时，使div仅水平扩展

2 个答案: