Question

我试图让父div在其中设置子元素的宽度而不设置固定的宽度。但是，我没有运气。

我需要大小的元素位于“内容容器”中，该容器没有定义宽度，因此是页面的宽度。

我把它放入小提琴（http://jsfiddle.net/8LfsW/）中，'content-container'的宽度设置为模拟它在更大的屏幕上观看。您将看到'mag-details'容器比其中的内容大。

现场使用的.content-main样式是：

.content-container{
    font-family:"helvetica neue",helvetica,arial;
    margin:auto;
    margin-top:20px;
}

和mag详细信息样式

#mag-details{
    margin:auto;
    background:#FCFCFC;
    border:1px solid #CCCCCC;
    border-radius:8px;
    max-width:1200px;
    box-shadow:1px 1px 2px #CCCCCC;
}

如果有人可以告诉我如何以及如果可能的话，将mag-details容器的大小调整到其中的内容大小，这将是非常值得赞赏的。非常感谢提前！

Answer 1

将父级更改为

display: inline-block;

http://jsfiddle.net/HT46H/

Answer 2

两个选项：

float:left。的 jsFiddle example

display: inline-block。的 jsfiddle example

Answer 3

我会移除浮动并在这些元素上使用inline-block。

然后在包装元素上使用white-spane:nowrap，这样当屏幕太小时它们就不会中断..

所以添加

min-width:100%;
display:inline-block;
white-space:nowrap;

到#mag-details并将li元素更改为display:inline-block

http://jsfiddle.net/gaby/54kjf/

的结果

将Parent DIV设为其子项的宽度

3 个答案: