2

我正在尝试制作一个布局，其中有一个以动态方式添加其内容的 Div。我希望这个“父” div 具有固定的高度，并且当添加内容时，div 会根据需要水平增长。

这是我为隔离问题而制作的测试 HTML。

<html>
<head>
  <link rel="stylesheet" href="styletest.css" />
</head>
<body>
  <div style="width:700px;overflow:auto">
    <div class="anio">
      <div class = "semestre">
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
        <div class="floater"></div>
      </div>
    </div>
  </div>    
</body>
</html>

在这里，我有 7 个class=floaterdiv 进入class=semestre容器 div，当我添加更多 div 时，它应该水平增长class=floater。所有这些都进入一个固定宽度的 div overflow-x:auto。

在与 css 进行了一番斗争之后，我完成了以下工作：

div.floater { 
    margin: 4px;
    width: 110px;
    height: 82px;
    border: 1px solid #ccc;
    display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{  
    white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
    margin-top: 5px;
    margin: 2px;
    height: 90px;
    border: 1px solid #ccc;
    min-width:98%;

}
div.anio{
    margin : 2px;
    border: 1px solid #ccc;
    min-width:98%;

}

所以这行得通..有点.. class=floaterdiv 呈水平状态并导致overflow-x最外层 div 的激活，但包含 div 的容器 divclass=floater不会像我认为的那样增长（这可以通过边界看到而不是生长）。谷歌搜索后，我发现了一些建议的解决方案，例如width:auto在 css 属性之上添加min-width:或浮动它们，但没有一个有效。这是一个小问题，因为边框仅用于格式化。

我遇到的市长问题是，当我尝试将内容添加到class=floaterdiv 时，它们会变得疯狂并且不会停留在应有的位置（当它们没有内容时）。我尝试white-space:nowrap通过添加white-space:normal到浮动类来恢复，但这没有用。在那之后，我开始发疯，开始尝试随机的东西，并设法解决了我的第一个问题，但我忘记了我做了什么，并回到了步骤 1 D:。

老实说，我对 html/css 很陌生，我正在边做边学。所以如果这个问题已经被问过/回答过，相信我已经搜索过了。还请原谅我的英语，尽力而为。

感谢您的时间。

编辑：根据要求，小提琴：D http://jsfiddle.net/UBYKy/1/ 在那里你可以看到我的两个问题。

编辑2：我相信我已经找到了解决这两个问题的方法。对于第一个问题，我通过添加display: inline-block到父 div 来解决它，对于第二个问题，我添加vertical-lign:top到 floater 类 css（如 afshin 建议的那样），它工作得很好。我希望这可以帮助任何有同样问题的人。

4

1 回答 1

2

我认为你应该使用这个 

div.floater { 
 vertical-align:top;
 margin: 4px;
 min-width:110px;
 width: auto;
 height: 82px;
 border: 1px solid #ccc;
 display: inline-block; /*this to make the floaters go horizontal*/
}

演示

于 2012-09-22T18:31:04.517 回答