Question

我一直无法找到这个。

我有一个以身体margin: 0 auto;为中心的div。它包含多个div。我希望它扩展到它最宽的孩子width: auto;

的宽度

问题是我想让一个子div在右边对齐，但是这会将我的父级扩展到100％。如果父母没有固定宽度，我将如何实现这一目标？

Answer 1

您可以将包装器div设置为inline-block，并在其父级上设置text-align: center（而不是使用margin: 0 auto;）来执行您的操作。以下是一个示例：http://jsfiddle.net/joshnh/6Ake5/

这是HTML：

<div class="wrapper">
    <div class="foo"></div>
    <div></div>
    <div></div>
</div>

CSS：

body {
    text-align: center;
}
div {
    border: 1px solid red; /* To see what is going on */
}
.wrapper {
    display: inline-block;
    text-align: left; /* Resetting the text alignment */
    vertical-align: top; /* Making sure inline-block element align to the top */
    /* Inline-block fix for IE7 and below */
    zoom: 1;
    *display: inline;
}
.wrapper div {
    float: left;
    height: 200px; /* To see what is going on */
    margin: 10px; /* To see what is going on */
    width: 200px; /* To see what is going on */
}
.foo {
    border-color: blue; /* To see what is going on */
    float: right;
}

右对齐子div而不扩展具有动态宽度的父级

1 个答案: