1

このjsfiddleで問題を再現しました

サイズを変更したときにウィンドウが小さすぎると、右側の日付divが下に移動します（モバイルデバイスのビューを考えてください）

テキスト領域のサイズを変更し、サイズ変更時に日付 div を上部に保持することは可能ですか?

サイズを変更したときの問題を示す 2 つの画面を含めました。

画面 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%;
}
4

2 に答える 2

1

float: leftこれを実現する 1 つの方法は、 fromを削除し.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 に答える