檬味博客 » 问答 » 编写CSS+DIV代码完成三列固定宽度的网页结构布局

编写CSS+DIV代码完成三列固定宽度的网页结构布局

{margin: 0;padding: 0;} body{width:1012px;} div{ width: 300px;height: 300px;border: 2px solid #333;border-sizing:border-box;/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*/ f...
编写CSS+DIV代码完成三列固定宽度的网页结构布局
给右列一设置margin：auto 50px; 上下外边距不管，左右个50px
margin 意思是 简写属性在一个声明中设置所有外边距属性。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{width:1012px;}
div{
width: 300px;
height: 300px;
border: 2px solid #333;
border-sizing:border-box;/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*/
float: left;
}
#a{
background: #ffc33c;
border: 2px solid #333;
}
#b{
background:#ff33cc ;
margin: auto 50px;
}
#c{
background:#ff33cc ;
}
</style>
</head>
<body>
<div id="a">
左列
</div>
<div id="b">
右列1
</div>
<div id="c">
右列2
</div>
</body>
</html>
2018-06-19
margin-left：700px 距离浏览器的左端2018-06-19
mengvlog 阅读 8 次 更新于 2025-07-20 16:39:40 我来答关注问题0
2 个回答檬味博客专题活动
  • xu_qiaoli DIV+CSS如何实现三列宽度自适应

    1、首选看一下html代码：html代码：this is left sidebar contentthis is main contentthis is right siderbar content 这种方法是...

  • anonymous css如何让三个DIV并列在一行中

    1、首先打开用到的编辑工具这里用DW 2、为了方便观察，我们把三个div设置三个背景颜色来观察，设置三个div样式这里取名：div1 div2 div3 并且引用三个样式；详解：background:#颜色；是取的三个不同的div背景颜色；给三个div设置宽度为width:300px高度height:200px;3、展示出来的效果如图：...

  • 楚今万丝娜 DIV+CSS一行三列代码如何写?

    3);/ 此处运用了一个css3的表达式，将div三等分，ie8及以上可以支持，当然也可以根据需要设置固定值 / width:-webkit-calc(100 /3);width:-moz-calc(100 / 3);height:100%;} 以上经亲自测过，ie8+、chrome、firefox表现良好。

  • 沧海是大雄 编写CSS+DIV代码完成三列固定宽度的网页结构布局

    {margin: 0;padding: 0;} body{width:1012px;} div{ width: 300px;height: 300px;border: 2px solid #333;border-sizing:border-box;/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*/ f...

  • cccyyy789 DIV+CSS三列横向排布怎么都错开了?看看下面的代码,求解救!

    maincount2 #side1 maincount2 #main maincount2 #side2 这3个id加起来的宽度刚好是1003PX 不过再加上下面的定义就超出了页面范围 maincount2 #side1 { margin-right: 737px; } //右边间距加大737px maincount2 #main { margin-right: 238px; } //右边间距加大238px maincount2 #side...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部