1

我正在使用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%);
}
4

1 回答 1

3

解决此问题的一种方法是添加

.agendaheader {
    margin-left: 65px;
}

问题是由于.datefill是浮动元素引起的，因此其他内联元素自然会环绕它。

编辑：或者，您可以通过使用 而不是简化标记和 CSS 来消除对clearing的需要。display:inline-blockfloat <div>

您当前使用的标记float是一种很好的方法，可以让其他元素自然调整大小，而不是在宽度较小时跳到下一行，这会发生在inline-block.

于 2013-04-22T08:56:47.657 回答