常见的布局

同一行最后一个元素靠右显示

buju.png

比如想实现如图所示的浮层布局，左侧两个元素，右侧一个元素：父元素变成弹性盒模型，中间子元素设置margin-right: auto。这样就是自动填充满剩余空间的全部。

#foot{
    display: flex;
    align-items: center;
}
#foot img{
    margin: 0 10px;
}
#foot #btn_down{
    display: inline-block;
    margin-right: 10px;
}
#foot div{
    margin-right: auto;
}

    
    

         
乐赢斗地主
         
0秒下载，顶级手感
    
    立即下载

每行n个元素，最后一行不够靠左显示

jiugongge.png

1、目前我能想到的只有通过浮动实现，每行的子元素向左浮动，并设置右边距，每行最后一个不设置。如果不考虑低版本浏览器不支持CSS3的情况，可以直接使用nth-of-type(3n)。

    

        

        

        

    
   
    

        

        

    
   

li{
    margin-bottom: 20px;
    background-color: #ccc;
    height: 200px;
}
div:nth-of-type(3n){
    margin-right: 0;
}
div{
    width: 30%;
    margin-right: 5%;
    float: left;
    height: 200px;
    background-color: red;
}

2、但是如果我就是要兼容低版本浏览器怎么办？看了《CSS世界》学到一招，可以给父元素设置margin-right的值为负，增加了容器的可用宽度（此时相当于100%+10px）。

image.png

div{
    margin-right: -10px;
}
p{
    float: left;
    margin-right: 10px;
    background: blue;
    width: 100px;
    height: 50px; 
    margin-bottom: 20px;
}

    

    

    

    

    

    

    

    

    

    

注意用了此方法子元素就不要用百分比。

lable标签两端对齐

默认情况下，我们敲半角的空格宽度并不够，但是多个空格如果不做单独的设置又会合并成一个空格。那么怎么办呢？其实直接打空格是可以实现的，但是注意需要输入全角的空格，而且全角可以识别多个。

label.png

商品价格

我们很常见的一种样式是商品的现价格后面跟着一个之前的价格，之前的价格被划掉了。如图

价格.png

之前我是这样实现的，把现价格的￥和200放在两个元素中，分别设置大小，后面划掉的价格是一个元素，设置text-decoration: line-through。其实这里有更简洁的实现。

span{
    color: red;
    display: inline-block;
    margin-right: 5px;
}
span:first-letter{
    font-size: 14px;
}
del{
    color: #ccc;
    font-size: 14px;
}

    ￥200
    ￥250

现价格可以放在一个元素中，然后给该元素添加一个伪元素:first-letter单独设置第一个字符的样式（注意：行内元素无效）。划掉的价格直接方法在del标签就会直接有中划线的效果。