html - CSS div 溢出 :auto does not work

Question

我的 div-overflow 不工作。

链接:jsfiddle

HTML:

<div class="modalDialog" id="chooseVariableDialog">
     <h4>Choose Variables</h4>

  <div class="" id="variablesContainer">
    <div class="variablesDiv">
        <div class="variablesType">Variables</div>
    </div>
    <div class="variablesDiv">
        <div class="variablesType">Type</div>
    </div>
    <div class="variablesDiv">
        <div class="variablesType">comp1</div>
    </div>
    <div class="variablesDiv">
        <div class="variablesType">extern1</div>
    </div>
    <div class="variablesDiv">
        <div class="variablesType">coord1</div>
    </div>
    <div class="variablesDiv">
        <div class="variablesType">id1</div>
     </div>
  </div>
</div>

CSS:

  div.variablesDiv {
   float: left;
   width: 150px;
   align-content: center;
 }

 div.modalDialog {
  width: 600px;
  height:auto;
  overflow:auto;
  background-color: #F0F0F0;
  top: 10%;
 }

 div.names {
  float:left;
  width:100px;
  padding-left: 35px;
 }

 h4 {
  color:#66CCFF;
  text-align:center;
 }

div.variablesType {
  color: #66CCFF;
 float:left;
 padding-left: 45px;
}

div.variablesDiv {
 float: left;
 width: 150px;
 align-content: center;
}

div#variablesContainer {
 width: auto;
 height: auto;
 position: relative;
 float:left
}

6个div(variables, type, comp1, extern1, coords1 and id1)应该在一条线上，但不知道为什么溢出不起作用。

Answer 1

试试这个 Demo

HTML

<div class="modalDialog" id="chooseVariableDialog">
     <h4>Choose Variables</h4>

    <div class="" id="variablesContainer">
        <div class="variablesDivWraper">
            <div class="variablesDiv">
                <div class="variablesType">Variables</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">Type</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">comp1</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">extern1</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">coord1</div>
            </div>
            <div class="variablesDiv">
                <div class="variablesType">id1</div>
            </div>
        </div>
    </div>
</div>

查询

var variablesDivCount = $('.variablesDiv').length;
$('.variablesDivWraper').width(variablesDivCount * 150);