Question

我是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">
          &nbsp;

          <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;">&nbsp;</span>
          </div>

          <div>
            <p class="p1">&nbsp;</p>

            <h3 class="p1"><span class="s1">Search lists of health care,
            psychology&nbsp;</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>&nbsp;</p>

          <p>&nbsp;</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>&nbsp;</p>

          <h3 align="right">Find a wide range of support tools that&nbsp;<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>&nbsp;</p>

          <p>&nbsp;</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>&nbsp;</p>

          <p>&nbsp;</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>

Answer 1

这就是你在说什么吗？

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

的示例

HTML - 在调整浏览器大小时格式化

1 个答案: