Css “将图像浮动到自己的位置”；栏「；没有divs

我想在我现有的博客上重新创建以下页面的外观：

这里的特点是我们有两列，左边是图像，右边是文本，图像下面没有文本环绕。此外，图像显示在垂直位置，将其与文本置于上下文中

当前的设计使用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的情况下实现我想要的宽屏布局。这只是一个梦吗？

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

这样如何：对于窄屏幕视图，只需保持图像原样，对于宽屏幕视图，将图像向左浮动，但给段落留出足够宽的左边距，以便将其移出图像区域，例如：

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

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

---

通过调整输出区域的宽度，您应该可以找到我认为您需要的效果。当列的宽度小于400px时，布局将塌陷为一列。在Safari和Firefox中对我很好；您可能需要一个媒体查询来启用shim，以使旧版本的IE正常工作，但布局在其中仍然可以正常工作。

some。这正是我所希望的。酷。也可以考虑缩小图像以适应屏幕大小，如果它们的屏幕比你的基本图像宽度要窄一些。我添加了第二个媒体查询，以在中演示该技术。