[分享]css中float的div大小不同

在CSS中，使用float属性可以让多个div元素在同一行内显示，其中某些div大小不同的情况下，如何使用float属性来控制其对齐呢？/HTML代码/ 左侧内容 右侧内容 /CSS代码/ .left...

在CSS中，使用float属性可以让多个div元素在同一行内显示，其中某些div大小不同的情况下，如何使用float属性来控制其对齐呢？

/*HTML代码*/
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>

/*CSS代码*/
.left {
   float: left;
   width: 50%;
   background-color: blue;
}
.right {
   float: left;
   width: 50%;
   background-color: green;
} 

在上述代码中，设置了两个div元素，一个左侧一个右侧。使用float属性来让它们在同一行内显示。

在CSS中，float属性用于指定元素浮动到左侧或右侧。使用float属性后，其他元素就会环绕在其周围。

在上述代码中，我们设置了两个元素都设置float:left，使得它们都在左侧，并使用width属性设置其宽度为50%，保证左右两个元素相等。同时，为了方便观察，对两个元素设置了不同的背景色。

当两个元素大小不同时，可以通过给元素设置不同的宽度来实现大小不同的元素结构对齐。

/*HTML代码*/
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
<div class="clear"></div>

/*CSS代码*/
.left {
   float: left;
   width: 30%;
   background-color: blue;
}
.right {
   float: left;
   width: 70%;
   background-color: green;
}
.clear {
   clear: both;
} 

在上述代码中，我们设置了两个元素分别使用了30%和70%的宽度，分别让左侧和右侧的元素显示大小不同。同时，也可以看到，为了让下面的元素不环绕在这两个元素周围，我们使用了clear:both属性，让下面的元素另起一行显示。

因此，通过float属性的控制，我们可以实现在同一行中显示多个大小不同的元素，并控制其对齐方式。