全寬排附近飄來一個

Question

我有兩排像這樣

<div class="container me"> 
    <div class="message"> 
    </div> 

    <div class="time"> 
    </div> 
</div> 

<br /> 

<div class="container he"> 
    <div class="message"> 
    </div> 

    <div class="time"> 
    </div> 
</div> 

像這樣

* { 
    padding:0; 
    margin:0; 
} 

.container { 
    width:500px; 
    height:50px; 
    outline:1px solid green; 
} 

.message { 
    width:250px; 
    height:50px; 
    border:1px solid red; 
    display:inline-block; 

    border-radius:5px; 
    position: relative; 
} 

.time { 
    width:50px; 
    height:50px; 
    background:orange; 
} 

.container.me .time { 
    float:right; 
} 

.container.he .time { 
    float:left; 
} 

CSS和我試圖讓消息塊完全可能的寬度（100％減去時間塊）， 可能嗎？

的jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/

Answer 1

您可以設置.message到width: calc(100% - 52px);寬度 - 這52px是您.time DIV（50像素）+ 2px的對的.message邊框的寬度（左和右）

編輯：對於IE8支持你不能使用，所以你可以嘗試這樣的棘手的事情：https://jsfiddle.net/L2pqhnsq/