Question

您好，在创建网站时，我一直在努力，我遇到了问题。我有一个链接，旁边有一个图像。链接将链接中的文本与图像的底部对齐。我希望链接周围的盒子与图像的底部对齐，而不会在它下方生成~20px的区域。看下我的意思的代码如下。

HTML：

    <div id="links">
    <a href="#" class="links">Link1</a>
    <a href="#" class="links">Link2</a>
    <a href="#"><img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/0/0a/350x175.jpg" /></a>
    <a href="#" class="links">Link3</a>
    <a href="#"class="links">Link4</a>
    </div>

CSS：

#links{
    /* SIZING */
    width:70%;
    min-width:625px;
    min-height:10px;
    /* POSITIONING */
    margin-left:auto;
    margin-right:auto;
    background-color:#FF0;
}

.links {
    /* DISPLAY */
    display:inline-block;
    background-color:#CCC;
    border-radius:15px;
    box-shadow: 2px 2px 5px #888888;
    /* SIZING */
    width:calc(16.25% - 10px);
    height:50px;
    margin:5px;
    /* TEXT */
    line-height:50px;
    text-align:center;
    text-decoration:none;
    font-size:auto;
    color:#000; 
}

#logo{
    text-decoration:none;
    border:0px;
    width:calc(35% - 10px);
    padding-top:10px;
}

Answer 1

如果将vertical-align设置为bottom，它将像这样对齐底部;

.links {
    background-color: rgb(204, 204, 204);
    border-radius: 15px;
    box-shadow: 2px 2px 5px rgb(136, 136, 136);
    color: rgb(0, 0, 0);
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    vertical-align: bottom; //// ADDED STYLE
    width: calc(16.25% - 10px);
}

Demo Here

对齐项目时出现问题

1 个答案: