一行显示多张图片链接

需求描述，如图：

1.三张图片显示一列，每列占据屏幕的三分之一。

2.下面的文字居中显示。

3.上面有分割线，同时中间有两条分割线隔开三张图片。

css代码如下：

.question-area {
    background-color: #ffffff;
    padding-bottom: 20px;
    border-top: 1px solid #e3e3e3;
}
.question-area a{
    display:inline-block;   /*让a标签有宽度*/ 内联标签的padding，margin和块级标签有所不同：https://www.cnblogs.com/enmeen/p/5286564.html
    width:32.3%;           /*占屏幕的1/3*/
}
.question-area a:not(:first-child) {
    border-left: 1px solid #e3e3e3; 
}
.question-area a img{
    width:100%;    /*继承父元素的宽度*/
    height: 75px;
}
.question-area a div {
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}

html代码如下：

<div>
   <h1 class="question-title">问题分类</h1>
   <div class="question-area">
       <a href="more/icbc_guide.html">
          <img src="/m/img/zhenxinbaogao.png">
          <div>征信报告</div>
       </a>
       <a href="more/icbc_guide.html">
          <img src="/m/img/nashuizhenming.png">
          <div>纳税证明</div>
       </a>
       <a href="more/icbc_guide.html">
          <img src="/m/img/huankuanzhiyin.png">
          <div>还款指引</div>
       </a>
   <div>
</div>

这里涉及到伪类的概念，伪类包括静态伪类和动态伪类：

静态伪类，  a:visited {color:red;}：link（静态的伪类）;first-child(选择第一个子元素)

动态伪类，:focus,:hover,:active

 

转载于:https://www.cnblogs.com/liuyinlei/p/6646504.html