当更多的浮动div被添加到div时，只能水平扩展div [英] Make div expand only horizontally when more floating divs are added to it

问题描述

我正在试图创建一个包含其他浮动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 =moduleid =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; 
身高：100％; 
} 
 .grid_row {
 clear：both; 
 height：50px; 
} 
 .module，.header {
 padding：10px; 
 float：left; 
 border：灰色固体1px; 
 
  

解决方案

列表中，考虑使用更多语义 ul 。

演示

HTML：

 < ul class =grid> 
< li> 
< ul> 
< li>一密西西比< / li> 
< li>两个密西西比< / li> 
< li>三个密西西比< / li> 
< li>四密西西比< / 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; 
宽度：100％; 
 overflow-x：scroll; 
背景：白色; 
 white-space：nowrap; 
} 
 
 .grid li li {
 list-style-type：none; 
 display：inline-block; 
 padding：10px; 
 border：1px纯灰色; 
 height：20px; 
} 
  

I am trying to make a div that contains other floating divs to adjust its width such that adding more floating divs (dynamically using jQuery) will only expand the div in its width, not allowing the floating divs to create a new line. Therefore, I want to fix this issue such that each div with class grid-row only expands in width, and so I will be able to scroll using the overflow: scroll for the parent grid div. I have searched a lot for answers, and it seems that it is a famous issue. However, non of the answer solved my problem.

I am currently doing this:

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

解决方案

If you're making a list, consider using the more semantic 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时，只能水平扩展div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！