0

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

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

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

谢谢！

4

3 回答 3

2

尝试这个：

方法一

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

示范。

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

示范。

于 2013-07-21T13:36:10.750 回答
1

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

或者，您可以使用带有 CSS display:inline 或 display:inline-block 的元素。正如您所描述的那样，两者都会由浏览器自动定位，并在空间不足时并排并“包装”。不同之处在于，内联元素不能让您对填充、尺寸等进行太多控制，而内联块元素为您提供了 display:block 元素的所有好处。然而，我记得 IE6 对内联块元素确实有一些困难，这很烦人。

如果您想使用内联元素，只需将您的子 div 切换为 span：span 默认情况下是内联的，无需进一步工作。但是，默认情况下没有显示 inline-block 的元素，所以如果你需要使用它，你最好保留你的 div。

希望你有一些选择。

于 2013-07-21T13:45:57.183 回答
0

你为什么不只是浮动：离开孩子的div？

于 2013-07-21T13:34:27.373 回答