2

我正在使用骨架，这是我想要的响应式布局：

移动布局 - 标题、图像、描述都在一个列堆栈中

桌面布局 - 图片右侧的标题和描述

移动和桌面布局

我应该如何构建 html 和 css 以便响应式布局可以仅使用 css 和媒体查询从一种更改为另一种？我尝试在桌面布局中将图像浮动到左侧，并使标题成为移动布局中的块元素：

<div class="container">
<span class="date">10/1/2012</span>
<span class="title">title</span>
<img class="thumbnail" src="http://www.placehold.it/300x200">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat.
</p>
</div>​​​​​​​​​​​​​​

移动 CSS

.title {
     display:block;
}

​.thumbnail {
}

.conatainer {
 width:320px;
}

桌面 CSS

​.title {
     position:relative;
}

​.thumbnail {
    float:left;
}

.conatainer {
 width:960px;
}

这似乎在大多数情况下都有效，除了如果文本足够长，描述会在照片底部围绕它的照片下方包裹，而不是仅仅保留在右栏。

如果我使用骨架或响应式网格系统之一，我应该如何执行此操作，我应该使用它们的列类吗？

4

1 回答 1

0

您也可以float: left在样式表的.description段落上进行设置。desktop.css这将使您的段落在自己的“列”中展开。

然后，记住也要对.container元素应用清除

于 2012-10-01T12:12:13.943 回答