[分享]css几个图片平均占满一整行

在web开发中，CSS是不可或缺的一部分，它能够美化我们的页面，让页面看起来更加的漂亮，今天让我们来学习如何让几个图片平均占满一整行。首先我们需要了解两个CSS的概念：float和clear。floa...

在web开发中，CSS是不可或缺的一部分，它能够美化我们的页面，让页面看起来更加的漂亮，今天让我们来学习如何让几个图片平均占满一整行。

首先我们需要了解两个CSS的概念：float和clear。float可以让元素脱离文档流，让其他元素可以绕过该元素，并且可以将多个元素浮动在同一行，使它们排列紧凑。而clear属性可以将浮动的元素元素还原到文档流中。

下面是使用float和clear属性实现几个图片平均占满一整行的代码：

<div class="container">
  <img src="image-1.jpg" class="image">
  <img src="image-2.jpg" class="image">
  <img src="image-3.jpg" class="image">
  <img src="image-4.jpg" class="image">
  <div class="clear"></div>
</div>

<style>
  .container {
    width: 100%;
  }
  
  .image {
    width: 25%;
    float: left;
    border: 2px solid #ccc;
    box-sizing: border-box;
  }
  
  .clear {
    clear: both;
  }
</style> 

在上面的代码中，我们将四个图片元素设置为float:left，让它们浮动在同一行。为了让它们占满一整行，我们将宽度设置为25%。另外，我们需要在最后一个图片元素的下面添加一个clear元素，将之前浮动的元素还原成文档流中。

这样，我们就可以很容易的让几个图片平均占满一整行了。希望这篇文章能够对大家的CSS学习有所帮助。