在另一个div中的div位置

Question

我绝望地试图了解div如何在HTML中运行。这是我的HTML代码：

<div id="user_p">
    <img src="img/pp/djbaptou.jpg">
    <div class="followings"> djbaptou </br> Baptiste Arnaud </br> Description : Salut j'aime les carottes lol
        <a href="#">Modifier profil</a>
    </div>
    <div class="followings"> Suivi de : </br> 200 </br> personnes</div>
    <div class="followings"> Suivi par : </br> 300 </br> personnes</div>
</div>

这是与HTML的这一部分相关的样式表：

#user_p{
    background-color: red;
    width: 60%;
    height: 200px;
    margin: auto;
}

#user_p img{
    display: inline-block;
    width: 200px;
    height: 200px;
}

.followings{
    font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
    width: 200px;
    display: inline-block;
    background-color: green;
    margin-left: 60px;
    text-align: center;
}

你能向我解释一下它是如何显示出来的那样：

我希望我的绿色div居中

而且，如果我调整窗口大小，它看起来像这样：

我只想让绿色的div留在红色的......

有什么想法？

Answer 1

这是我的第一个答案，所以我希望它会对你有所帮助 这就是我改变样式表的方式，以便它符合你的目的

/lib/usr/local/gcc-4.8.3/lib64/libstdc++.so.6

首先，你的主div应该设置为 display：inline-block; ，女巫基本上意味着它的宽度将自动调整，因为你把元素放入其中，并且因为你的绿色div设置到显示：inline-block; 红色div将自动在宽度上自动缩放，因此您必须禁用它的宽度属性，并且因为它可以扩展到最小值，所以放置填充拥有你最正确的绿色div的权利

使用媒体查询？这是我从HTML体验中学到的，如果你正确地建立网站，即使你把它扩展到最低限度，它也不会像媒体一样漂亮查询，但一切都将是绝对可见的。

Answer 2

如果您希望它垂直居中，您可以使用flexbox并使#user_p具有display: flex;属性的弹性容器，并为其align-items: center进行垂直对齐。此外，您可以摆脱子元素的inline-block显示值。此外，如果您想要一些真正响应并且看起来不同尺寸的内容，我建议您使用媒体查询并在较小屏幕上将flex-direction值调整为column，并在较大屏幕上调整row ，并使用其他flexbox属性。

#user_p{
    background-color: red;
    width: 60%;
    height: 200px;
    margin: auto;
  display: flex;
  align-items: center;

}

#user_p img{
    width: 200px;
    height: 200px;
}

.followings{
    font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
    width: 200px;
    background-color: green;
    margin-left: 60px;
    text-align: center;
}