Fatal编程技术网
  • html/
  • Html 3列Div样式

Html 3列Div样式

html css

Html 3列Div样式,html,css,Html,Css,出于一些奇怪的原因，我无法让它正常工作（对于3列布局），它们显示的好像是在不同的行上。 -------------------CSS----------------- 。左侧内容{ 浮动：左； 位置：相对位置； 宽度：30%； 填充：10px； 右边距：0px； 左边距：0px； 边框样式：实心； 边框宽度：2倍； 背景图像：url（../images/right_divider.gif）； 背景重复：无重复； 背景位置：左下； } .中心内容{ 浮动：左； 位置：相对位置； 宽度：40%； 填

出于一些奇怪的原因，我无法让它正常工作（对于3列布局），它们显示的好像是在不同的行上。 -------------------CSS-----------------

。左侧内容{
浮动：左；
位置：相对位置；
宽度：30%；
填充：10px；
右边距：0px；
左边距：0px；
边框样式：实心；
边框宽度：2倍；
背景图像：url（../images/right_divider.gif）；
背景重复：无重复；
背景位置：左下；
}
.中心内容{
浮动：左；
位置：相对位置；
宽度：40%；
填充：10px；
左边距：10%；
边框样式：实心；
边框宽度：0px；
背景图像：url（../images/right_divider.gif）；
背景重复：无重复；
背景位置：左下；
}
.右侧内容{
浮动：对；
位置：相对位置；
宽度：20%；
填充：10px；
边框样式：实心；
边框宽度：0px；
背景图像：url（../images/right_divider.gif）；
背景重复：无重复；
背景位置：左下；
}
---------------html--------------
左导航
主控
主控
主控
主控
主控
主控
主控
主控

右犯人


标题
端口端文本。。。
右舷文本。。。
中栏文本。。。
页脚文本。。。
下面是CSS代码：
身体{
边际：0px；
填充：0px；
}
div#头{
明确：两者皆有；
高度：50px；
背景色：浅绿色；
填充：1px；
}
左分区{
浮动：左；
宽度：150px；
背景色：红色；
}
对{
浮动：对；
宽度：150px；
背景颜色：绿色；
}
中段{
填充：0px 160px 5px 160px；
边际：0px；
背景颜色：银色；
}
div#页脚{
明确：两者皆有；
背景颜色：黄色；
}
或 下面是你的链接
(http://www.neuroticweb.com/recursos/3-columns-layout/)@frank；正如您在代码中看到的，三个
div
的总宽度大于
100%
。原因是
填充
和
边框
会增加div的宽度。因此，可以使用css3
框大小
属性进行此操作。停止填充以增加div的宽度

css:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
检查这个例子

注意：IE7不支持
框大小调整
属性。因此，您可以从div中删除
填充
，并将
边距赋给它的子级

您应该从CSS3:）中查看列宽/列间距。）

如果你

左边距：10%
然后您必须将
.center\u content
类宽度减少为35

<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
And here's the CSS code:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;