如何将一个div分为等宽的两列一列放文字,一列放图片,并且两列高度和div相同且固定不会发生变化
时间: 2024-05-01 17:19:58 浏览: 10
可以使用CSS的flex布局来实现这个效果。具体实现步骤如下:
1. 将父元素设置为display: flex;,使其成为一个flex容器。
2. 设置父元素的高度和子元素的高度为100%,使其高度固定不变。
3. 设置子元素为flex: 1;,使两个子元素平分父元素的宽度。
4. 将文字和图片分别放置在两个子元素中。
示例代码如下:
HTML:
```html
<div class="container">
<div class="left">
<p>这里是文字</p>
</div>
<div class="right">
<img src="图片路径" alt="图片描述">
</div>
</div>
```
CSS:
```css
.container {
display: flex;
height: 300px; /* 设置高度 */
}
.left, .right {
flex: 1; /* 平分父元素宽度 */
height: 100%; /* 设置高度 */
}
.left {
background-color: #ccc;
padding: 20px;
}
.right {
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
```
其中,左侧的文字部分设置了背景色和内边距,右侧的图片部分设置了背景色,并使用了flex布局的justify-content和align-items属性使图片水平和垂直居中。图片的宽度和高度使用了max-width和max-height属性来保证不超出父元素的范围。