Question

我的div溢出无效。

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（变量，类型，comp1，extern1，coords1和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>

Jquery

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

Answer 2

问题在于

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

通过制作宽度：自动，您可以告诉容器适应其父元素的宽度，而不是其内容。

尝试宽度：900px;它会起作用。

Answer 3

很少有css更改会使div可滚动。

1）删除float：left并将display：table-cell属性添加到div.variablesDiv。您已在两个地方为variablesDiv声明了css。删除声明的任何内容并使用以下css div.variablesDiv

div.variablesDiv {
   /*float: left;*/
   width: 150px;
   align-content: center;
   display: table-cell;
}

2）将div.modalDialog的overflow属性修改为overflow-x：scroll

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

CSS div溢出：auto不起作用

3 个答案: