其他 div 元素内的响应 div 元素

Question

我在主 div 元素中有两个 div 元素，我希望这两个 div 向左浮动并对齐主 div 的中心。像这样的东西。

[ main div        [div1][div2]       ]

我已经成功地浮动了两个 div，但我未能在两侧分配空间。我的意思是说将它们居中对齐。代码浮动左CSS

.container{

    width:100%

    height: auto;

} 

.img{

    width:auto;

    height:auto;

    float:left;

}

.data{

    width:auto;

    height:auto;

}

html code

<div class="container">

    <div class="img"> image goes here</div>

    <div class="data">data goes here</div>

</div>

Answer 1

如果你写 text-align:center 到 parent.It 将对齐他们的孩子谢谢你的评论.container{&nbsp; &nbsp; width:100%&nbsp; &nbsp; height: auto;&nbsp; &nbsp; text-align:center;}&nbsp;.data{&nbsp; &nbsp; width:auto;&nbsp; &nbsp; height:auto;}<div class="container">&nbsp; &nbsp; <div class="img"><img src="https://picsum.photos/200/300"/></div>&nbsp; &nbsp; <div class="data">data goes here</div></div>

Answer 2

您可以将 img 和数据 div 包装在一个 div 中，然后将该 div 向右浮动 50% 的宽度。我不喜欢使用浮点数；在我看来 flexbox 会是一个更好的选择，但如果你喜欢浮动，我在下面放了一些代码你可以试试。HTML：&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="dataImgContainer">&nbsp; &nbsp; &nbsp; &nbsp; <div class="img"> image goes here</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="data">data goes here</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>在 CSS 表中添加以下内容：.dataImgContainer {&nbsp; &nbsp;width: 50%;&nbsp; &nbsp;float: right;&nbsp;}