如何使div居中，文本向左，照片向右

Question

我不知道如何像这样

制作段落和照片内联

Answer 1

要使内容居中，您应指定包含内容的容器的最大宽度，并将边距设置为自动。

您可以尝试将两者放在同一个div中，然后在CSS中使用float: right;作为图像，float: left;作为文本吗？

如果您不想继续摆弄CSS中的值，可以使用Bootstrap框架并执行：

<div class="summary">
  <p class="col-md-9">[text here]</p>
  <img class="col-md-3" src="[image source]"/>
</div>

然后使用9和3来获取列的宽度，如何获得它们

Answer 2

Flexbox模块可以轻松实现这一目标。

CSS：

#profile {
display: flex;
}
#bio {
flex: 2;
margin-right: 2px;
/*
other rules for bio here
*/
}
#photo {
flex: 1;
/*
other rules for photo here
*/
}

HTML：

<section id="profile">
<section id="bio">
<p>Bio Text</p>
</section>
<section id="photo">
<img src="user_profile_photo.jpg" alt="User Photo" />
</section>
</section>

或者，你可以使用'display：table'代表'#profile'和'display：table-cell'代表'#bio'＆amp; '#photo'。