html - div block 的对齐问题

Question

我用这个 jsfiddle 重现了我的问题

如果窗口在调整大小时变得太小(考虑移动设备 View )，我右边的日期 div 会向下移动

是否可以调整文本区域的大小并在调整大小时将日期 div 保持在顶部？

我已经包含了两个显示调整大小时问题的屏幕。

屏幕 1

屏幕 2(调整大小)

我现在的 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%;
}

Answer 1

实现这一点的一种方法是从 .msg-summary 中删除 float: left 并在右侧留出空白以保留日期空间- div，参见 http://jsfiddle.net/ZybhC/2/