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 の位置: 相対を持ち、子 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

Munawwarの flex-helperを使用すると、既存のマークアップに最小限の変更 (各列に 1 つずつ、2 つの div タグを導入) で、これはかなり簡単になります。

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 に答える