檬味博客 » 问答 » 编写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 阅读 375 次 更新于 2025-09-11 00:52:21 我来答关注问题0
2 个回答檬味博客专题活动
  • anonymous css如何让三个DIV并列在一行中

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

  • xu_qiaoli DIV+CSS如何实现三列宽度自适应

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

  • anonymous div+css中三列横向并排列的代码

    2 3 3、 /*

  • 沧海是大雄 编写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...

  • 百度网友54fa85666 div+css中三列横向并排列的代码

    三列布局的话,设置宽度小于总宽的1/3,然后全部浮动左float:left;就可以了。。

其他CSS类似问题

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

CSS相关话题

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