看这个
我想制作一个主容器，它有 2 个子容器 - 左、右（各占屏幕宽度的 50%）。
左边必须包含一张照片。右侧必须包含文本（h2 和 p 正下方）。文本应该位于图像的中间。
我需要它来描述商店中的产品。
我正在尝试这个
div { border: 1px solid #CCC; }
<div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>
但在这种情况下，我无法在同一个 div 中键入 h2 和 p。
Thanks.
如果你不介意使用flexbox。
.container {
border: 10px solid red;
display: flex;
box-sizing: border-box;
}
.container > div {
flex-basis: 50%;
border: 10px solid blue;
margin: 10px;
padding: 10px;
}
.left img {
width: 100%;
height: 100%;
}
.right__content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.right__content * {
margin: 0;
}
<div class="container">
<div class="left">
<img src="https://placehold.it/300x150" alt="left img">
</div>
<div class="right">
<div class="right__content">
<h1>Header text</h1>
<p>my desc</p>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
