Question

我想在现有博客上重新创建以下页面的外观： http://jeff.klukas.net/bio/

这里的标志是我们有两列，左边的图像和右边的文字，没有文字包裹在图像下面。此外，图像显示在垂直位置，将它们放在文本的上下文中。

当前设计使用Blueprint CSS，每个图像和文本部分都有成对的div。我想创建一个自适应设计，可以缩小到单个列以获得更小的浏览器宽度，因此源（从Markdown生成）看起来像：

<img src=img1.png>
<p>First paragraph...</p>
<img> src=img2.png>
<p>Second paragraph...</p>

在狭窄的屏幕上显示为：

------------
|img1      |
------------
First paragraph
------------
|img2      |
------------
Second paragraph

或在宽屏幕上：

------------  First paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text.
------------  Second paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text
              more text more text.

我可以用我知道的@media技巧来实现我想要的大部分功能，但我不确定是否可以实现我想要的宽屏幕布局而不会弄乱html。这只是一个梦吗？

Answer 1

我认为这应该是可能的，特别是如果你可以确定或控制图像的宽度。在示例布局上，它们的宽度都相同，这样可以使生活更轻松。

这个怎么样：对于窄屏幕视图，只需将图像保留原样，对于更宽屏幕视图，将图像浮动，但为段落留下足够宽的边距，使其移出图像区域，例如：

img {
  float: left;
}
p {
  margin-left: 400px; /* Or however wide your images are */
}

...然后使用屏幕宽度的条件媒体查询服务，您希望图像“弹出”。

Here's a worked example. With kittens.使用输出区域的宽度进行游戏，您应该找到我认为您正在寻找的那种效果。当列比400px窄时，布局会折叠成一列。在Safari和Firefox中对我来说很好用;您可能需要一个支持媒体查询的填充程序来使旧版本的IE工作，但布局仍然可以在其中正常工作。

将图像浮动到没有div的自己的“列”

1 个答案: