将图像放在屏幕左侧并将文本放在屏幕右侧并在下方放置页脚的 HTML 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13465052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Code to put image in left and text in right side of screen with footer below?
提问by html boy
This is what my page should look like -
我的页面应该是这样的——
--------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))
How can I do this? I am actually looking for a template where all I have to do is place my image, text and header and footer code.
我怎样才能做到这一点？我实际上正在寻找一个模板，我所要做的就是放置我的图像、文本以及页眉和页脚代码。
回答by 2C-B
Option 1:
选项1：
For text wrapping around the image, use this basic HTML:
对于环绕图像的文本，请使用以下基本 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>
And this CSS:
这个CSS：
#content img {
float: left;
}
Option 2:
选项 2：
For two distinct content columns, use this HTML:
对于两个不同的内容列，请使用以下 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>
And CSS:
和 CSS：
#content .col {
float: left;
}
#footer {
clear: left;
}
回答by Felix Guo
You could use a table like this:
你可以使用这样的表：
<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>
回答by powerc9000
Don't use tables. Have a look at this fiddle http://jsfiddle.net/2sWrF/1/
不要使用表格。看看这个小提琴http://jsfiddle.net/2sWrF/1/
You use css to float the image and text so they are side by side
您使用 css 浮动图像和文本，使它们并排
the .cfin the css is a clearfix it makes it so that the footer will go underneath the div with the image and text instead of being to the side of it
在.cfCSS中它使使页脚会去用图片和文字的DIV下方，而不是被以它的侧clearfix
回答by Vitalyp
Or, you can use responsive layout http://jsfiddle.net/PSBtr/12/Iframe as a ebbedded page.
或者，您可以使用响应式布局http://jsfiddle.net/PSBtr/12/Iframe 作为 ebbedded 页面。
iframe
Adoptive grid as a markup.
采用网格作为标记。
