HTML代码将图像放在左侧,文本放在屏幕右侧,页脚下方？

Question

这就是我的页面应该是什么样子 -

--------Header (will put code to load header from external site here)
--Image on left side - Text on right side.
--------Footer ((will put code to load footer from external site here))

我怎样才能做到这一点？我实际上在寻找一个模板,我所要做的就是放置我的图像,文本以及页眉和页脚代码.

Answer 1

选项1:

对于文本环绕图像,请使用此基本HTML:

<div id="header">
  ... contents go here ...
</div>

<div id="content">
  <img src="sample.jpg" alt="" />
  <p>Example content</p>
</div>

<div id="footer">
  ... contents go here ...
</div>

这个CSS:

#content img {
  float: left;
}

选项2:

对于两个不同的内容列,请使用以下HTML:

<div id="header">
  ... contents go here ...
</div>

<div id="content">
  <div class="col">
    <img src="sample.jpg" alt="" />
  </div>
  <div class="col">
    <p>Example content</p>
  </div>
</div>

<div id="footer">
  ... contents go here ...
</div>

和CSS:

#content .col {
  float: left;
}

#footer {
  clear: left;
}