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浮动图像和文本，使它们并排

css中的.cf是一个clearfix，它使得页脚将在图像和文本的div下方而不是在它的旁边

Answer 4

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

iframe

采用网格作为标记。

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

4 个答案: