搜 索

怎样使div每行三列不留空平均分布在父系div框架中

编辑:QTOOL.NET日期:2019-06-01126

在制作网页过程中,我们再写矩形div产品框架时,会让它一行几列平均分布在父系div中,但如果我们设置每行之间的间隔,在div父系框架的最右边就会出现超出的部分或不能与父系框架的左边对齐,那么怎样才能让矩形产品不超出父系平均分布在父系框架中呢?
如:
<div class="fu">
<div class="mr">
示例内容1
</div>
<div class="mr">
示例内容1
</div>
<div class="mr-0">
示例内容1
</div>
</div>
设置前两个示例框架右边距,然后重新给第三个示例定义一个没有边距的样式,即可平均分布.
.mr-0 { margin-right: 0}
或者我们还可以先设置父系框架为absolute浮动 ,给父系框架长度加上一个设置示例内容的边距长度
在将其内部的示例内容框架设置为浮动框,然后自由设置边距,超出部分隐藏即可.
如下代码:
<style type="text/css">
#fu{width: 500px;background-color: #414141;min-height: 180px;position: relative;overflow: hidden;margin-left: auto;margin-right: auto}.fu{width: 560px;background-color: #414141;min-height: 180px;position: absolute}.fu .shili{width: 130px;height: 50px;float: left;background-color: #838383;text-align: center;margin-right: 55px}
</style>
<div id="fu">
  <div class="fu">
    <div class="shili"> 示例内容1 </div>
    <div class="shili"> 示例内容1 </div>
    <div class="shili"> 示例内容1 </div>
  </div>
</div>

TAG标签:css
此文章由QTOOL.NET编辑
最新文章

热门标签