0

私は3つの部門を持っています。内部に 2 つの子 div を含むコンテナー div。最初の子 div の幅は固定ですが、高さは内部のテキスト (メッセージ ボックス) によって決定する必要があります。同じ行のその div の直後に、別の div を 1 行の高さ (基本的には時間) にする必要があり、親 div の下部に配置する必要があります (たとえば、最初の子 div に 5 行が含まれている場合、2 番目の子 div は子 div は、(メッセージ ボックスの) 最初の子の最下行のレベルで、最初の子 div の直後にある必要があります)

基本的に、私はこのことを再現しようとしています: ここに画像の説明を入力

メッセージのすぐ横に時間が表示されていることに注意してください。

とにかく、このために、時間 div を親 div のサイズにする必要があると考えました。どうすればそれを行うことができますか？

前もって感謝します

したがって、これはHTMLになります 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod </p>

</div>
<div class = "dateandtime">11:37AM</div>
</div>

そしてCSS：

.yellowmessage { */ Parent div /*
padding:0 2% 0 0;
float:left;
}

.themessage {
font-size:2.5em;
display: inline-block;
border-radius:20px;
padding:3% 0 3% 0;
max-width:90%;
background-color:rgb(246,227,143);
float:left;
}

.dateandtime {
float:left;
}
4

2 に答える 2

0

Fiddle

これが HTML 構造であると仮定します。

<div class="yellowmessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
    </div>
    <div class="dateandtime">11:37AM</div>
</div>
<div class="bluemessage clear">
    <div class="themessage">
        <p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare risus vulputate consequat semper. Quisque facilisis facilisis pulvinar. Maecenas aliquam, orci id rhoncus tempus, lacus tellus mattis diam, eget elementum eros dui vel leo.</p>
    </div>
    <div class="dateandtime">11:49AM</div>
</div>

これはあなたのCSSかもしれません

.yellowmessage, .bluemessage {
    position: relative;
    margin: 5% 2%;
}
.themessage {
    font-size:1.85em;
    border-radius:20px;
    padding: 0 2%;
    max-width: 90%;
    box-shadow: inset 0 -4px rgba(0, 0, 0, 0.07), inset 0 22px 25px rgba(255, 255, 255, 0.58), 0 3px 11px rgba(0, 0, 0, 0.28);
}
.yellowmessage > .themessage {
    float: left;
    background-color: #FFF980;
}
.bluemessage > .themessage {
    float: right;
    background-color: #A7DBD8;
}
.dateandtime {
    position: absolute;
    bottom: 0;
    font-size: 80%;
}
.bluemessage > .dateandtime {
    left: 0;
}
.yellowmessage > .dateandtime {
    right: 0;
}
于 2013-10-23T12:28:49.827 に答える
0

あなたはこれを使うことができます.あなたの質問についてここに答えがあります.

それに時間を追加しました。私はいくつかの変更を加えました。

ライブデモ **http://jsfiddle.net/mek5Z/1348/**

于 2013-10-23T12:36:48.093 に答える