我一直很难找到这个。
我有一个以 body 为中心的 div margin: 0 auto;
。它包含多个 div。我希望它扩展到它最宽的孩子的宽度width: auto;
问题是我想让其中一个子 div 在右侧对齐,但这会将我的父级扩展到 100%。如果没有父级的固定宽度,我将如何完成此操作?
您可以通过将包装器 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;
}