1

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

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

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

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

屏幕一 在此处输入图像描述

屏幕 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%;
}
4

2 回答 2

1

实现这一点的一种方法是删除float: leftfrom.msg-summary并为其保留保留 date-div 空间的权利，请参阅http://jsfiddle.net/ZybhC/2/

于 2013-07-14T17:08:50.117 回答
0

您可以通过像这样订购元素来实现这样的设计：

图片日期文字

然后，您所需要的就是将图像 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

于 2013-07-14T17:07:41.313 回答