Question

请在此处查看jsFiddle：http://jsfiddle.net/9apNs/

我正在尝试在JQM的列表视图中显示一系列项目。我在点击/点击时会对其进行自定义。

我现在要做的事情应该很简单 - 在左边对齐一个图像，在右边对齐一些文本块。我已经使用％age作为宽度，但我更喜欢文本紧邻图像，无论图像大小或屏幕扩展或缩小多少。图像相当小（宽度和高度约为50像素）。

如果你在jsFiddle上查看它会更有意义（在JQM listview的其余部分中查看它），但这里是代码：

<li>
    <div class="entire">
      <div class="date">23 November 2013</div>

    <div class="image">
      <img src="http://vogelsangpeststl.com/wp-content/uploads/2013/02/House_mouse-50x50.jpg"/>
    </div>
    <div class="text">         
      <div class="first">ID - Short</div>


      <div class="second">
        Slightly-longer ID - may possibly be two lines.
      </div>
      <div class="notes">
        Notes could really be quite a lot of text.  Usually just a line or two,
        but could be quite long.  In that case, want to keep image on left and have
        text fill up the rest of the space
      </div>
    </div>
    </div>

  </li>

这是css

.entire {
  position: relative;
  width: 100%;
  border: 1px solid red;

}
.text {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  border: 1px solid blue;
}
.image {
  display: inline-block;

  vertical-align: middle;
  width: 25%;
  height: 100%;

  border: 1px solid green;
}


.first {
  font-weight: bold;
  font-size: larger;
}
.date {
  position: absolute;
  right: 0px;
}

.second{
  font-weight: normal;
}
.notes{
  font-style: italic;
  font-size: smaller;
}

Answer 1

<div class="image">是不必要的。从容器中取出<img>标记，并将所有元素浮动到.entire容器中。我还建议你将你的第一个，第二个和音符div分别改为h3，h4和p标签。这在语义上是一种更好的编码方式，提高了页面的可读性和SEO。

<强> HTML

<ul class='slats'>
<li class="entire">
  <img src='http://placekitten.com/80/80' />
  <h3>sub heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
...

<强> CSS

li{ clear:left; margin-top:1em;}
img{float:left;}
.text{float:left;}

在jqm listview中将文本对齐到图像的右侧

1 个答案: