股利不換行後垂直對齊

Question

我使用的PhoneGap將某個應用，並在此應用程序有一個議程女巫有以下格式化： http://jsfiddle.net/QwVmv/

它看起來不錯，但我唯一的問題當屏幕寬度太小時，位置不能正確排列。你可以通過縮小jsfiddle的結果屏幕來重現這一點。

編輯1 對不起，我忘了告訴我如何顯示它。我希望將換行符後面的文本垂直排列，與上面的其他文本相同。

我使用的代碼： HTML：

<div class='wrapper' data-id="+contents[i].id+"> 
    <div class='datefill'></div> 
    <div class='date'> 
     <span class='day'>22</span> 
     <span class='month'>April</span> 
     <span class='year'>2013</span> 
    </div> 
    <div class='agendaheader' id='agenda1'> 
     <div class = 'title'>Open House</div> 
     <div class = 'time'>00:00 tot 23 April 2013 - 19:00</div> 
     <div class='venue'>a location with a long name!</div> 
    </div> 
    <div style='clear: both;'></div> 
    <div class = 'description' id='description1'>A long discription witch is initially hidden.</div> 
</div> 

CSS：

.date { 
    position: absolute; 
    width: 70px; 
    font-family: Georgia, serif; 
    color: #999; 
    margin: 0 auto; 
} 

.day, .month, .year { 
    position: absolute; 
} 

.day { 
    font-size: 30px; 
    top: 15px; 
} 

.month { 
    top: 0; 
    left: 0; 
    font-size: 18px; 
} 

.year { 
    top: 19px; 
    right: 0; 
    font-size: 20px; 
    rotation: -90deg !important; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
} 

.datefill{ 
    width:65px; 
    height:50px; 
    float:left; 
} 


.wrapper{ 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
} 

.description{ 
    height: 0; 
    max-height: 9999px; 
    overflow: hidden; 
    -webkit-transition: height 0.4s ease-in-out; 
    -moz-transition: height 0.4s ease-in-out; 
    -ms-transition: height 0.4s ease-in-out; 
    -o-transition: height 0.4s ease-in-out; 
    transition: height 0.4s ease-in-out; 
} 

html{ 
    padding:0; 
    margin:0; 
    width:100%; 
} 

body{ 
    padding:0; 
    margin:0; 
    width:100%; 
    background-color: #1C1C1C; 
    background-size: 50px; 
    background-image: url("../img/bg.png"); 
    outline: 0; 
} 

.wrapper{ 
    padding:5px; 
    background-color: #1A1A1A; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    color:#FFFFFF; 
    border-radius: 20px; 
    border-style:solid; 
    border-color:#FA840E; 
    border-width:2px; 
    margin-top:40px; 
    margin-bottom:30px; 
    margin-right:7%; 
    margin-left:7%;  
    box-shadow: 
     0 0 0 2px hsl(0, 0%, 0%), 
     0 0 0 4px hsl(30, 96%, 52%); 
} 

Answer 1

一個解決這個辦法是增加

.agendaheader { 
    margin-left: 65px; 
} 

問題是由於所致.datefill是一個浮動元素，所以其他內聯元素自然地包裹了aroun d it。

編輯： 或者，你可以簡化使用 display:inline-block代替 float的標記和CSS這將刪除清除 <div>需要一個 。

使用float您當前的標記

是有其他元素自然調整而當寬度較小，其將與inline-block發生不下來跳到下一行的好辦法。