gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 07:05:42 24 4
gpt4 key购买 nike

我一直找不到这个。

我有一个位于正文中心的 div margin: 0 auto;。它包含多个 div。我希望它扩展到它最宽的 child 的宽度 width: auto;

问题是我想让子 div 之一在右侧对齐,但这会将我的父级扩展到 100%。如果父级没有固定宽度,我将如何完成此操作?

最佳答案

您可以通过将包装器 div 设置为 inline-block,并在其父级上设置 text-align:center(而不是使用 >边距:0 自动;)。这是一个例子: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;
}​

关于html - 右对齐子 div 而不扩展具有动态宽度的父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12399517/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com