css - 多个 div，有的在左，有的在右，都与 CSS 垂直对齐

Question

如果容器中有任意数量的元素，最好的方法是将一些元素左对齐，一些元素右对齐，同时使左右内容垂直居中？

例如，给定此标记:

    <div class="action">
        <div class="message">This is our message</div>
        <div class="comment">Comments for the message</div>
        <div class="person">John Doe</div>
        <div class="date">01/18/2013</div>
        <div class="time">12:35 PM</div>
    </div>

消息和评论是否可以在操作容器中左对齐，而人物、日期和时间右对齐，左右内容都垂直居中？这可以在没有新标记且每个元素的内容长度任意的情况下完成吗？

谢谢。

Answer 1

一些 CSS 可以解决问题。具有包含的 div position:relative，并将子 div 向左或向右浮动。同时居中对齐文本。

.container{
    position: relative;
}

.left{
    float: left;   
    width: 50%;
    background-color: Silver;
    text-align: center;
}

.right{
    float: right;
    width: 50%;
    background-color: Yellow;
    text-align: center;
}

Fiddle Example