Question

我目前正在设计一个网站，其中一个部分有三个图像并排排列。每张图片都放在它自己的div中。它工作正常但CSS看起来很拥挤。你可以在同一个div中对齐三个图像，而不是为每个图像分配一个div吗？

＆＃13;

.subSectOne {
    position: absolute; left: 20%;
    float: left;
    padding: 20px;
    background: url(../images/paw1.png);
    overflow: hidden;
}

.subSectTwo {
    position: absolute; left: 40%;
    float: left;
    padding: 20px;
    background: url(../images/paw2.png);
    overflow: hidden;
}

.subSectThree {
    position: absolute; left: 60%;
    float: left;
    padding: 20px;
    background: url(../images/paw3.png);
    overflow: hidden;
}

＆＃13;

<div class="subSection">  
  
                <div class="subSectOne">

                </div>
                <div class="subSectTwo">

                </div>
                <div class="subSectThree">

                </div>
</div>

＆＃13;

Answer 1

你可以尝试这个https://jsfiddle.net/uxvg0kod/及其响应

HTML

<div class="subSection">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
</div>

CSS

.subSection {
  text-align: center;
}

.subSection img {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}

Answer 2

你正在寻找这样的东西吗？

<style>
    .container {
        width: 100%;
    }

    img.img {
        display: block;
        width: 30%;
        float: left;
        /* other styles */
    }

    .clear {
        clear: both;
    }
</style>   

 <div class="container">
        <img class="img img1" title="img1" src="/images/img1.png">
        <img class="img img2" title="img2" src="/images/img2.png">
        <img class="img img3" title="img3" src="/images/img3.png">
        <div class="clear"></div>
 </div>

Answer 3

我想我找到了一个很好的解决方案。我添加了一个新课程.row，在本课程中，我为background-images设置了 div 属性。

＆＃13;

body{
    margin: 0;
}
.subSection{
    width: 100%;
    height: 200px;
}

.subSectOne {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;
}

.subSectTwo {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;
}

.subSectThree {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;   
}

.row{
    height: 100%;
    float: left;
    width: calc(100%/3);
    background-size: contain;
}

＆＃13;

<div class="subSection">  
   <div class="row subSectOne"></div>
   <div class="row subSectTwo"></div>
   <div class="row subSectThree"></div>
</div>

＆＃13;

注意：在.row，.subSectOne和.subSectTwo之后插入.subSectThree，因为contain - 属性赢了＆＃39;如果你不这样做，就会触发。

对齐图像的正确CSS是什么？

3 个答案: