0

给定容器中任意数量的元素，将一些元素左对齐和右对齐，同时将左右内容垂直居中，最好的方法是什么？

例如，给定这个标记：

    <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>

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

谢谢。

4

2 回答 2

2

一些 CSS 可以解决问题。将包含 div 的位置设为：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;
}

小提琴示例

于 2013-01-18T19:46:39.667 回答
0

通过对现有标记的最小更改（引入两个 div 标签，每列一个），如果您使用Munawwar 的 flex-helper ，这将变得相当简单。

HTML：

<div class="hbox flex">
    <div class="left vbox main-center">
        <div class="message">
            <p>This is our message.</p>
            <p>It spans many lines.</p>
            <p>Or rather, paragraphs.</p>
            <p>Additional waffle.</p>
            <p>Syrup, bacon, a banana.</p>
            <p>Tall glass of milk.</p>
        </div>
        <div class="comment">Comments for the message.</div>
    </div>
    <div class="right vbox main-center">
        <div class="person">John Doe</div>
        <div class="date">01/18/2013</div>
        <div class="time">12:35 PM</div>
    </div>
</div>

CSS：

/*Example-specific CSS*/
/*left column*/
.left {
    width: 80%;
    background-color: Silver;
    text-align: center;
}
/*right column*/
.right {
    width: 20%;
    background-color: Yellow;
    text-align: center;
}
/*Minimal use of Munawwar's flex-helper*/
/* https://github.com/Munawwar/flex-helper */
/*Stack child items vertically*/
.vbox {
    display: flex;

    /*Align children vetically*/
    flex-direction: column;
    align-content: flex-start;

    /*Prevent extending beyond boundaries*/
    overflow: hidden;
}
/*Stack child items horizontally*/
.hbox {
    display: flex;

    /*Align children horizontally*/
    flex-direction: row;
    align-content: flex-start;

    /*Wrap items to next line on main-axis*/
    flex-wrap: wrap;

    /*Prevent extending beyond boundaries*/
    overflow: hidden;
}
/*Stretch item along parent's main-axis*/
.flex {
    flex: 1;
}
/*Stack child items to the main-axis center*/
.main-center {
    justify-content: center;
}

JSFiddle 演示

尽管有些华夫饼可能已被吃掉，但在制作此答案时没有损坏华夫饼。

于 2017-01-01T12:36:05.497 回答