我对HTML非常陌生，在调整浏览器窗口大小时，我在格式化方面遇到了一些困难。当浏览器很大时，我会在左边浮动一个图像，然后在右边浮动文本。然而，当浏览器较小时，文本会奇怪地换行。理想情况下，当调整浏览器大小时，我希望文本在图像下方移动，但我不确定如何进行。我能做的最好的事情是为整个事情设置一个绝对div，在侧面创建一个滚动以保持格式。问题是，这是在一个更大的网站上，当浏览器大小减少时，它会修改格式，所以看起来仍然很奇怪。
任何帮助都将不胜感激！我提前为我混乱的代码道歉。
<body>
<div style="min-width: 960px; margin: 0 auto;">
<p><strong>Why re-invent the wheel? Here are existing resources both on and offline
that offer support and services we think are helpful.</strong></p>
<p><img alt="" src=
"/sites/default/files/u32/Screen%20Shot%202013-11-08%20at%203.57.06%20PM.png" style=
"width: 1000px; height: 300px;" /></p>
<div class="outercontainer">
<div class="innercontainer">
<div h3="" style="position:relative">
<div>
<a href=
"http://www.walkalong.ca/links/professional-health-care-facilities"><img alt=
"" src="/sites/default/files/u29/Link1new.png" style=
"opacity: 0.9; width: 385px; height: 171px; float: left; border-width: 0px; border-style: solid; margin-left: 120px; margin-right: 10px;" /></a>
</div>
<div>
<span style="line-height: 1.6em;"> </span>
</div>
<div>
<p class="p1"> </p>
<h3 class="p1"><span class="s1">Search lists of health care,
psychology </span><br />
<span style="line-height: 1.6em;">and counselling directories <a href=
"http://www.walkalong.ca/links/professional-health-care-facilities">here</a></span></h3>
</div>
<p> </p>
<p> </p>
<h3><a href="http://www.walkalong.ca/links/support-tools"><img alt="" src=
"/sites/default/files/u29/Link2new.png" style=
"opacity: 0.9; width: 362px; height: 159px; float: right; border-width: 0px; border-style: solid; margin-left: 90px; margin-right: 90px;" /></a></h3>
<p> </p>
<h3 align="right">Find a wide range of support tools that <br />
<span style="line-height: 1.6em;">offer one-on-one conversations <a href=
"http://www.walkalong.ca/links/support-tools">here</a></span></h3>
<p> </p>
<p> </p>
<p><a href="http://www.walkalong.ca/links/related-resources"><img alt="" src=
"/sites/default/files/u29/Link3revision.png" style=
"width: 372px; height: 159px; float: left; margin: 10px 10px 10px 140px;" /></a></p>
<p> </p>
<p> </p>
<h3 class="p1"><span class="s1">Find additional resources on mental<br />
health for all of your needs <a href=
"http://www.walkalong.ca/links/related-resources">here</a></span></h3>
</div>
</div>
</div>
</div>
</body>
这就是你所说的吗？
<style>
.left{
float:left;
width:300px;
}
.left img{
width:300px;
height:auto;
}
</style>
<div class="left">
<img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg"/>
</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adi Lorem ipsum dolor sit
amet, ctetur adi. Lorem ipsum dolor sit amet, consectetur adi. Lorem
ipsum dolor sit amet, consectetur adi.Lorem ipsum dolor sit amet, consectetur adi
</div>
下面是一个例子http://jsfiddle.net/hxMK4/