HTML DIV 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13585589/
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 DIV Layout
提问by Subby
I wish to create a simple layout like below.
我希望创建一个如下所示的简单布局。
Can someone please tell me how I can achieve this? Please forgive the "frankness", I come from a C# background so developing a WEB UI is slightly daunting for me.
有人可以告诉我如何实现这一目标吗？请原谅“坦率”，我来自 C# 背景，因此开发 WEB UI 对我来说有点令人生畏。
Update:I'm juggling around with 's and CSS but not producing what I want.
更新：我正在处理 's 和 CSS，但没有产生我想要的。
采纳答案by Sarang
This may help you:
这可能会帮助您：
<body>
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>
回答by tbwiii
While we could write out all the code you'll need to implement this layout, it would not be beneficial to you if you do not know CSS. We can however point you in the right direction.
虽然我们可以写出实现此布局所需的所有代码，但如果您不了解 CSS，这对您没有好处。但是，我们可以为您指明正确的方向。
This can be achieved using the Float rule with CSS. Here's a link
这可以使用带有 CSS 的 Float 规则来实现。这是一个链接
A good basic understanding of HTML should also be had for laying this out semantically. Codecademywill take you through both HTML and CSS if you need help with all of it.
还应该对 HTML 有一个很好的基本理解，以便在语义上进行布局。如果您需要所有帮助，Codecademy将带您了解 HTML 和 CSS。
回答by Alejandro
<HTML>
<HEAD>
<TITLE>Working with div</TITLE>
<META CHARSET="UTF-8" />
</HEAD>
<BODY>
<link rel=stylesheet href="div.css" type="text/css">
<div class="a2">two</div>
<div class="a1">one</div>
<div class="VerticalSpace"></div>
<div class="a3">three</div>
<div class="HorizontalSpace"></div>
<div class="a4">four</div>
</BODY>
</HTML>
and the content of div.css file is
div.css 文件的内容是
.a1, .a2, .a3, .a4
{
border: 4px solid;
}
.VerticalSpace, .HorizontalSpace
{
border: 0px;
float: left;
}
.a2
{
height: 250px;
float: left;
width: 74%;
}
.a3
{
height: 350px;
float: left;
width: 35%;
}
.a4
{
height: 350px;
float: left;
width: 35%;
}
.a1
{
height: 617px;
width: 23%;
float: right;
}
.VerticalSpace
{
width: 60%;
height: 10px;
}
.HorizontalSpace
{
height: 350px;
width: 4%;
}
回答by nvcnvn
Two column div layout with fluid left and fixed right column
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
These link tell you how to handle two columns layout. First just do it to have two columns Left and Right, after that, do it again for the Left columns.
两列 div 布局，左流动，右列固定
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
这些链接告诉你如何处理两列布局。首先只做两列左和右，之后，对左列再做一次。
回答by danwellman
A CSS grid system, like 960.gs, or Twitter's bootstrapwill help massively in getting layouts to work as you want them to.
CSS 网格系统，如960.gs或Twitter 的引导程序，将极大地帮助您让布局按您希望的方式工作。
