垂直对齐 – 如何在右侧对齐内嵌块元素?

前端之家收集整理的这篇文章主要介绍了垂直对齐 – 如何在右侧对齐内嵌块元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
正如你可以在下面的小提琴: http://jsfiddle.net/EvWc4/3/中看到的,我正在搜索一种方法来将第二个链接(link-alt)与父节点(p)的右侧对齐。

为什么不使用浮点数或位置:绝对你会说,主要原因是我喜欢链接显示(内联块)属性允许它们以自然的方式垂直对齐。

使用float或position:absolute;我将被迫计算并放置一些额外的margin-top或top值来垂直对齐链接

这是代码,但更好的看到小提琴http://jsfiddle.net/EvWc4/3/

<p>
        <a href="#" class="link">link</a>
        <a href="#" class="link link-alt">link alt</a>
    </p>

    p {
       padding: 20px;
       background: #eee;
    }
    .link {
       display: inline-block;
       padding: 10px;
       background: #ddd;
    }
    .link-alt { padding: 20px; }

感谢提前!

解决方法

要使用CSS3,您可以使用弹性框模型

HTML:

<div class="content">
    <div class="Box Box1"><a>Link 1</a></div>
    <div class="Box Box2"></div>
    <div class="Box Box3"><a>Link 2</a></div>
</div>

CSS:

.content {
    display: Box;
    Box-orient: horizontal;
    Box-pack: center;
    Box-align: center;
}
.Box2 {
    Box-flex: 1;
}

(需要供应商前缀)

http://jsfiddle.net/EvWc4/18/

原文链接:https://www.f2er.com/css/218252.html

猜你在找的CSS相关文章