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

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 */
}

...然后在屏幕宽度上使用条件媒体查询服务,您希望图像"弹出".

这是一个有效的例子.小猫.玩输出区域的宽度,你应该找到我认为你正在寻找的那种效果.当列比400px窄时,布局会折叠成一列.在Safari和Firefox中对我来说很好用; 您可能需要一个支持媒体查询的填充程序来使旧版本的IE工作,但布局仍应正常工作.