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是一个浮动元素引起的，所以其他内联元素自然地环绕着它。

修改或者，您可以使用display:inline-block代替float来简化标记和CSS，这样就无需清除< / em> <div>。

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

在换行后，Div不垂直对齐

1 个答案: