Question

我在做某事时遇到了问题，但很难解释它。

我有一个动态的div列表 - 例如3,5或10。每一个div应该在一行旁边。当然这很容易，但这就是问题所在。所有div都在父div中，宽度为：200px。例如，所有5个子div的宽度分别为30,100,50,200和40像素。因此所有div都不能在一条线上，其中一些应该在下一行或者在第三行上移动。那也是有效的。我的问题是我希望每行上的div都附加在父div的右边。

以下是一个例子：

<div class="parent">
    <div class="child">Test</div>
    <div class="child">ok</div>
    <div class="child">Very very long text</div>
    <div class="child">Long text</div>
    <div class="child">adsdas</div
</div>

.parent {
    width: 200px;
    overflow: auto;
    background-color: #ccc;
}
.child {
    float: left;
    border: 1px solid #000;
}

http://jsfiddle.net/xy2goa3e/

我希望将Test，ok和非常非常长的文本附加到右侧。此外，长文本和adsdas将附加到右侧，一切都应该是动态的。

提前致谢！

Answer 1

使用以下css解决了您的问题：

.parent {
    width: 200px;
    overflow: auto;
    background-color: #ccc;
    text-align:right;
}
.child {
    display: inline-block;
    padding:0;
    margin:0;
    border: 1px solid #000;
}

使用孩子的display: inline-block;并将text-align:right;提供给父母。

检查Fiddle。

Answer 2

您需要添加

.parent {
      display:inline;
}

http://jsfiddle.net/xy2goa3e/6/

Answer 3

将float课程的.child从left更改为right似乎可以解决问题 - 除非我误解了某些内容？

更新了小提琴：http://jsfiddle.net/xy2goa3e/3/

附加到右侧的多行上的动态div

3 个答案: