用DIV塊對齊問題

右邊我的日期格獲得向下移動，如果窗口變得太小時重新調整大小（思移動設備視圖）

是否可以重新調整文本區域的大小並在重新調整大小時將日期div保留在頂部？

我已經包括兩個屏幕顯示重新調整大小時的問題。

屏幕1 enter image description here

屏幕2（重新調整大小）

enter image description here

我現在的CSS看起來是這樣的：

div.thumbnail_image { 
float: left; 
height: 64px; 
position: relative; 
width: 64px; 
} 
.widget-content { 
padding: 12px 15px; 
border-bottom: 1px solid #cdcdcd; 
} 
.msg-list { 
border-top: 1px solid #DDDDDD; 
padding: 10px 12px; 
} 

.msg-list span { 
display:block; 
} 
.msg-list .msg-date { 
display: block; 
border: solid 1px #00ff00; 
color: #BBBBBB; 
float: right; 
margin: 0 0 0 0; 
text-align: center; 
width: 50px; 
} 
.msg-list .msg-date .msg-month { 
display: block; 
font-size: 19px; 
font-weight: bold; 
margin-bottom: -4px; 
} 
.msg-summary { 
border: solid 1px #ff0000; 
display: block; 
float: left; 
max-width: 70%; 
}

來源

2013-07-14 Paul

一種方法是從.msg-summary刪除float: left並給它一個保證金的權利保留日期格的空間，請參閱http://jsfiddle.net/ZybhC/2/

來源

2013-07-14 17:08:50 ulle

這樣做的竅門！謝謝 – Paul

可以實現這樣的設計通過訂購這樣的元素：

圖像0日期文本

所有你需要的則是浮動的圖像DIV左，浮動日期格的權利，申請保證金文本格等於其他div的寬度：

.middle { 
    float:none; 
    margin:0 64px; 
} 
.date { 
    float:right; 
} 
.msg { 
    width:50%; 
    min-width:200px;  
}

演示：實現這一http://jsbin.com/ofevot/1/edit

來源

2013-07-14 17:07:41 user1721135

用DIV塊對齊問題

回答

相關問題