Question

我已经尝试了一段时间没有运气。我有一个父<div>标记（假设它的宽度设置为300px）。我正在尝试添加一系列较小的<div>标记以进入父级内部，并且并排放置，直到父级<div>的边缘，然后下一个子级<div>将成为放在“下一行”。基本上，我试图让这些孩子<div>标签就像单词包装一样。

我用疯子搜索了这个，但是如果不计算所有内容的大小并且用绝对坐标手动放置孩子<div>，我找不到真正做到这一点的方法，我可以这样做，但是我想避免。 Sp首先，我想知道是否有css或javascript方法可以提供相同的行为。

子div的数量是可变的，我使用C＃服务器端代码来计算它们。但是我使用哪种服务器语言并不重要。

谢谢！

Answer 1

试试这个：

方法1

使用display: inline-block;

<强> HTML：

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<强> CSS：

html, body { height: 100%; }
#parent {
    background-color: lightblue;
    width: 300px;
    height: 100%;
}
.child {
    width: 50px;
    height: 100px;
    display: inline-block;
    background-color: red;
}

Demonstration.

<hr>
<h2>Approach 2</h2>

使用float: left;

<强> HTML：

<div id="parent">
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
</div>

<强> CSS：

html, body { height: 100%; }
#parent {
    background-color: lightblue;
    width: 300px;
    height: 100%;
}
#child {
    width: 50px;
    height: 100px;
    float:left;
    background-color: red;
    margin: 2px;
}

Demonstration.

Answer 2

浮动是一种完全合理的方式。

或者你可以使用CSS显示元素：inline或display：inline-block。当你描述时，两者都是由浏览器自动定位的，当它们空间不足时，并排和“包装”。不同之处在于内联元素不会对填充，尺寸等进行过多的控制，而内联块元素可以为您提供显示的所有特权：块元素。但是，正如我记得的那样，IE6对内联块元素确实存在一些困难，这很令人恼火。

如果要使用内联元素，只需将子div切换为spans：默认情况下spans是内联的，无需进一步的工作。但是，默认情况下没有显示内联块的元素，所以如果你需要使用它，你也可以保留你的div。

希望你有一些选择。

Answer 3

你为什么不漂浮：离开孩子div？

HTML - 我可以在父<div>？</div> </div>中包装一系列<div>标签

3 个答案:

方法1