CSS列布局
[英]CSS column layout
问题描述
I'm going round in circles with a CSS layout. 
我用CSS布局绕圈子。 I basically want it like: 我基本上想要它：
<-------><-------------->
<------><------>
400px 50% 50%
So its 3 colums, one fixed size, and the other two taking up 50% each of the remaining space. 所以它的3个柱子，一个固定尺寸，另外两个占据剩余空间的50％。 I cant seem to make the second and third take up 50% of the remaining space. 我似乎无法使第二和第三占据剩余空间的50％。
Any help would be greatly appreciated, thanks very much :) 任何帮助将不胜感激，非常感谢:)
5 个解决方案
解决方案1
5 2009-07-22 12:55:29
I tried a couple of variations. 我尝试了几种变体。 Below works in Chrome 2, Firefox 3.5 and IE8: 以下适用于Chrome 2，Firefox 3.5和IE8：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>NLR</title>
<style type="text/css">
html, body, div { margin: 0; border: 0 none; padding: 0; }
div { height: 500px; border-collapse: collapse; }
#wrapper { padding-left: 400px; }
#nav { width: 400px; margin-left: -400px; float: left; background: yellow; }
#main { overflow: hidden; background: blue; }
#left { float: left; width: 50%; background: red; height: 300px; }
#right { float: right; width: 50%; background: green; }
</style>
</head>
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
解决方案2
2 2009-07-22 12:54:36
the markup: 标记：
<div id="left">some content</div>
<div id="main">
<div>more content</div>
<div>still more content</div>
</div>
the css: css：
#left {
float: left;
width: 400px;
margin-right: -405px; /* throwing in a little extra */
}
#main {
margin-left: 405px; /* matching the margin of #left */
}
#main > div {
width: 50%; /* may need to make it 49.9% for some browsers */
}
解决方案3
0 2009-07-22 12:48:23
First of all it's always a good practice to WRAP your layout. 首先，WRAP布局总是一个好习惯。 In the following example: 在以下示例中：
+---------------BODY-----------------+
|<---DIV#1---><--------DIV#2-------->|
| <---DIV3--> | <--DIV4--><--DIV5--> |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | |__________________| |
| |_________| | |____CLEAR DIV_____| |
+-----------------------------------+
- DIV0 : main-wrapper DIV0：主包装器
- DIV1 : sidebar-wrapper DIV1：侧边栏包装器
- DIV2 : content-wrapper DIV2：内容包装器
- DIV3 : sidebar-content DIV3：侧边栏内容
- DIV4 : content-left DIV4：内容左
- DIV5 : content-right DIV5：内容权利
- CLEAR DIV: to clear the floats. CLEAR DIV：清除浮子。
解决方案4
0 2009-07-22 12:50:28
Your best bet would be to have it set up like so: 你最好的选择是设置如下：
Wrappers are pretty important and make a lot of things much easier. 包装非常重要，使很多事情变得更容易。 To center things inside of wrappers, you can set margin left/right of the divs inside of the wrappers to "auto". 要将包装器中的内容居中，可以将包装器内部div的左/右边距设置为“auto”。
<div class="bigwrapper">
<div class="400pxdiv">
Content for 400pxdiv
</div>
<div class="rightwrapper">
<div class="50percent1">
50percent1's content
</div>
<div class="50percent2">
50percent2's content
</div>
</div>
</div>
解决方案5
-1 2009-07-22 12:56:39
This works for me in Firefox. 这适用于Firefox。
<!DOCTYPE html>
<title>Test</title>
<style>
#A { width: 400px; float:left; outline: thin solid pink; }
#B { margin-left: 400px; overflow: hidden; outline: thin solid pink; }
#B1, #B2 { width:50%; float:left; outline: thin solid pink; }
</style>
<div id=A>
A
</div>
<div id=B>
<div id=B1>
B1
</div>
<div id=B2>
B2
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.