其他 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{

    width:100%

    height: auto;

    text-align:center;

} 

.data{

    width:auto;

    height:auto;

}

<div class="container">

    <div class="img"><img src="https://picsum.photos/200/300"/></div>

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

</div>

Answer 2

您可以将 img 和数据 div 包装在一个 div 中，然后将该 div 向右浮动 50% 的宽度。我不喜欢使用浮点数；在我看来 flexbox 会是一个更好的选择，但如果你喜欢浮动，我在下面放了一些代码你可以试试。

HTML：

    <div class="container">

      <div class="dataImgContainer">

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

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

      </div>

    </div>

在 CSS 表中添加以下内容：

.dataImgContainer {

   width: 50%;

   float: right;

 }