定义一个div,在其中定义两个子div,这两个子div分布在一行,中间留有间隔,子div的中设计成左边为图片右边为文字且图片和文字等高
时间: 2024-02-23 09:01:03 浏览: 200
好的,您的问题是如何定义一个div,并在其中定义两个子div,这两个子div分布在一行,中间留有间隔,子div的中设计成左边为图片右边为文字且图片和文字等高。
您可以使用以下的HTML和CSS代码来实现这个布局:
```HTML
<div class="parent">
<div class="child">
<img src="image.jpg">
<p>Text</p>
</div>
<div class="child">
<img src="image.jpg">
<p>Text</p>
</div>
</div>
```
```CSS
.parent {
display: flex;
justify-content: space-between;
}
.child {
display: flex;
align-items: center;
gap: 10px;
}
.child img {
height: 100%;
object-fit: cover;
}
```
在这个例子中,我们使用了一个具有flex属性的父元素来排列两个子元素。每个子元素都是一个具有flex属性的容器,容器内包含一张图片和一个段落元素。通过使用gap属性,我们在两个子元素之间添加了一个间隔。通过设置align-items属性,我们可以使图片和文字垂直居中对齐。最后,我们使用object-fit属性来确保图片和文本具有相同的高度。
希望这个例子可以帮助您实现您的布局!
阅读全文