css左边图片右边详情 |css3 漂亮字体

HTML 代码如下：
<div class="container">
<img src="image.jpg" alt="图片">
<div class="details">
<h2>详情标题</h2>
<p>这里是详情的文字描述。</p>
</div>
</div>
CSS 代码如下：
.container {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 50%; /* 图片占页面宽度的一半 */
}
.details {
width: 50%; /* 详情占页面宽度的一半 */
padding: 20px;
}
h2 {
margin-top: 0;
}

通过将父元素设为 flex，然后使用 align-items 和 justify-content 居中，大家可以使图片和详情水平居中。然后，将图片宽度设为 50%，将详情宽度设为 50%，便可以使它们在同一行显示。最后，添加一些 padding 和 margin 样式，使布局更为美观。