html2个图片左浮动一个有浮动,HTML/CSS:制作两个高度相同的浮动div
时间: 2024-05-02 12:16:59 浏览: 73
制作两个高度相同的浮动div,可以参考如下代码:
HTML代码:
```html
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
```
CSS代码:
```css
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.left {
width: 50%;
height: 200px;
float: left;
background-color: #ccc;
}
.right {
width: 50%;
height: 200px;
float: left;
background-color: #ddd;
}
```
其中,`.container` 为父容器,设置了 `overflow: hidden;` 属性,可以清除浮动。`.left` 和 `.right` 分别为左右两个浮动的 div 元素,设置了宽度为 50%,高度为 200px,背景颜色分别为灰色和淡灰色。同时,`.left` 元素设置了 `float: left;` 属性,使其左浮动。这样,就可以实现两个高度相同的浮动 div。
如果想要在一个 div 中放置两个左浮动的图片,可以参考如下代码:
HTML代码:
```html
<div class="container">
<img src="image1.jpg" class="left">
<img src="image2.jpg" class="left">
</div>
```
CSS代码:
```css
.container {
width: 100%;
overflow: hidden; /* 清除浮动 */
}
.left {
width: 50%;
float: left;
}
```
其中,`.container` 为父容器,设置了 `overflow: hidden;` 属性,可以清除浮动。`.left` 为左浮动的图片元素,设置了宽度为 50%,并且都左浮动。这样,就可以实现两个左浮动的图片。
阅读全文