div块的对齐问题

Question

我已经用这个jsfiddle重新创建了我的问题

如果调整大小时窗口变得太小，右侧的日期div会下移（考虑移动设备视图）

调整大小时，是否可以调整文本区域的大小并使date 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

一种实现方法是删除float: left .msg-summary float: left ，在右边float: left一个边距以保留date-div的空间，请参见http://jsfiddle.net/ZybhC/2/

Answer 2

您可以通过如下排序元素来实现这种设计：

图片日期文字

然后，您需要做的是向左浮动图像div，向右浮动日期div，对文本div应用等于其他div宽度的边距：

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

演示 ： http : //jsbin.com/ofevot/1/edit