gpt4 book ai didi

css - 在父 div 中对齐子 Div

转载 作者:技术小花猫 更新时间:2023-10-29 12:53:10 25 4
gpt4 key购买 nike

<分区>

Possible Duplicate:
Make outer div be automaticly the same height as its floating content

我觉得我在这里遗漏了一些非常简单的东西......

我们有一个简单的设置:包含子 div 的父 div。我想:

  • 让父级根据子级调整其高度
  • 将子项对齐到父项的右边缘,而不是默认的左对齐。

使用 float:right 将导致父级不再正确调整大小并且子级“跳出”父级。

我尝试过使用 align: righttext-align: right 但到目前为止还没有成功。

HTML:

    <div id="parent"> <p>parent</p>
<div class="child"> <p>child</p> </div>

<div class="child right"> <p>child2</p> </div>
</div>

CSS:

    div{ padding: 15px; margin: 5px; }
p{ padding: 0; margin: 0; }

#parent{
background-color: orange;
width: 500px;
}

.child{
background-color: grey;
height: 200px;
width: 100px;
}

.right{ float: right; } // note: as the commenters suggested I should also be using a float:left on the other child.

Result :

result

What I want :

what I want

有什么关于我可以使用 #parent.right 使 child2 正确对齐到右边的建议吗?

编辑

我找到的最佳修复方法是在父级上使用 display:table。虽然我没有在 IE 中测试过它,但它修复了我关心的浏览器中的问题,并避免使用评论中讨论的不直观的 overflow:hidden 方法。

更好的是:将 child 的 margin-left 设置为 auto。

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