html - 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;
}

Answer 2

你可以使用这样的表：

<table style="width:100%">
<tr> 
    <td colspan="2">
    HEADER HERE
    </td>
</tr>
<tr>
    <td style="width: 70%">IMAGE</td> <-Change these to respective widths
    <td style="width: 30%">TEXT</td>
</tr>
<tr> 
    <td colspan="2">
    FOOTER HERE
    </td>
</tr>

</table>

Answer 3

不要使用表格。看看这个小提琴http://jsfiddle.net/2sWrF/1/

您使用 css 浮动图像和文本，使它们并排

在.cfcss 中是一个 clearfix 它使页脚将与图像和文本一起进入 div 下方，而不是在它的旁边

Answer 4

或者，您可以使用响应式布局http://jsfiddle.net/PSBtr/12/ Iframe 作为 ebbedded 页面。

iframe

采用网格作为标记。