子div旁邊的父div，在底部

我有三個div。一個容器div，裏面包含兩個子div。第一個div div具有固定的寬度，但高度應該由文本內部確定（這是一個消息框）。緊跟在同一行的div後面，應該是另一個div高一行（基本上是時間），它應該位於父div的底部（例如，如果第一個子div包含說5行，那麼第二行孩子DIV必須是第一個孩子的div之後，在第一個孩子的最低線的水平（消息框））子div旁邊的父div，在底部

基本上，我試圖重新這件事： enter image description here

注意消息旁邊的時間如何？

無論如何，爲此我想我需要使我的時間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; 
}

來源

2013-10-23 William Northern

添加你的HTML標記和CSS。 –

「我需要使我的時間div的父div的大小」 - 使子div的寬度：100％;高度：100％;' – mparryy

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-23 12:28:49

您可以使用此，有一個關於你的問題的答案here。

我已加入時間。我做了一些改變。

直播Demo**http://jsfiddle.net/mek5Z/1348/**

來源

2013-10-23 12:36:48 sinanakyazici

子div旁邊的父div，在底部

回答

相關問題