编写CSS+DIV代码完成三列固定宽度的网页结构布局
看完我也是醉了，这是一道数学题，不是代码问题；代码很简单；
倒推，第三个盒子距离左边700px 距离第二个盒子50px，那么第二个盒子距离左边为700-50-300-2=348px，2个像素为边框，别忘了；那么第二距离第一个盒子的距离为：348-300-2=46px;
那么剩下就简单了，但是根据你的截图来看，你没有对css进行初始化，导致第一个盒子距离左边有默认浏览器距离；有覆盖可能是这方面的原因， 你检查下。如果不明白可以继续追问
左右固定宽度，用position属性， 中间自适应用margin属性 上右下左。上下为0 左边的距离等于左div的宽度，右边的距离等于右div的宽度。
*{margin: 0;padding: 0;}
#a{
width: 200px;
height: 800px;
background: red;
position: absolute;
top: 0;
left: 0;
}
#b{
height: 800px;
background: #ccf;
margin: 0 auto;
}
#c{
width: 300px;
height: 800px;
background: yellow;
position: absolute;
top: 0;
right: 0;
}
给右列一设置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>
margin-left：700px 距离浏览器的左端
div+css三行两列布局怎么写,求大神解答
DIV+CSS三行两列经典布局 这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：<html> <head> <meta http-equiv='Content-Type' content="...
css 怎么实现 div水平居中 呢?
因为“text-align:center”控制的是文本居中，div居中可以用外边距margin来实现。1、新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时可以发现div靠近浏览器的左侧，文字在div中居中：2、为div标签添加新的外边距“...
css的div盒子中,如何将文本放在左下角?
需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的<style>标签中，输入css代码：div {position: relative; border: 1px solid green; width: 200px; height: 80px;} span {position: absolute;bottom: 0;} 3、浏览...
通过CSS+DIV怎么将文字写在图片上方
<div class="img-group"> <img src="img\/snow.png"><div class="img-tip">我是雪豹<\/div><\/div> CSS .img-group { position: relative; display: inline-block;} .img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; displa...
CSS怎么实现div随着网页的大小变化而变化呢?
<div class="one">流体布局<\/div><div class="two">布局<\/div> .one{width:80%; font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）;} .two{width:20%;font-size:em;} 注：通过这样设置，就可能拉动浏览器，盒模型的宽度就会随着你的拉动而变大缩小，但也是有...
请教DIV+CSS高手,这样的网页布局的DIV+CSS代码怎么写?
<head> <meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/> <title>无标题文档<\/title> <style type="text\/css"> { margin:0;padding:0;} body{ width:960px;position:relative;left:50%;margin-left:-480px;} div{ border:1px solid black;} header,#fooder{ he...
CSS如何把DIV永远置于页面的底部?
1、首先我们新建一个html页面，在这个html代码页面创建一个<div>标签，同时给这个<div>添加一个class类为footer。2、然后我们设置footer类，把div固定在底部。创建<style>标签，在该标签内设置通过position: fixed;bottom:0设置footer类样式，把div固定在底部。3、然后我们保存html代码，使用浏览器打开即可...
请问该如何清除DIV的浮动标签,就是溢出部分,CSS应该怎样写?
元素还是空<div><\/div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。<style type=”text\/css”> <!–{margin:0;padding:0;} body{font:36...
在网页制作中如何控制DIV居中显示,用CSS怎么控制背景图片大小?
1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的<style>标签中，输入css代码：body {text-align: center;background: url(small2.png); background-size: 60%;} 3、浏览器运行index.html页面，此时成功通过css控制了div居中显示，背景图片的大小为60%。
css如何设置div子容器之间的间距
需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的<style>标签中，输入css代码：.sub{margin-top: 30px;}。3、浏览器运行index.html页面，此时3个div子子容器的垂直间距被统一设置为了30px。
吴逸唯健： 帮你做了,很简单.把代码复制到记事本,把后缀名改为 ＂.htm＂就可以看了. 为了让你看的更清楚,我把每列加了颜色,(兼容Firefox,IE,等浏览器)<html><head><meta http-equiv=＂Content-Type＂ content=＂text/html; charset=gb2312＂ /...
大安市19137351300： 用CSS+DIV实现固定宽度的三列式分栏？
吴逸唯健： 帮你做了,很简单.把代码复制到记事本,把后缀名改为nbsp;“.htm“就可以看了.nbsp;为了让你看的更清楚,我把每列加了颜色,(兼容Firefox,IE,等浏览器)amp;lt;htmlamp;gt;amp;lt;headamp;gt;amp;lt;metanbsp;http-equiv=“Content-...
大安市19137351300： DIV+CSS一行三列代码如何写? - ？
吴逸唯健： 大概的结构如下:<div><div class=“left”><!-----左边盒子-----><ul><li>条目1</li><li>条目2</li><li>条目3</li> ……</ul></div> <div class=“middle”><!-----左边盒子-----><ul><li>条目1</li><li>条目2</li><li>条目3</li> ……</ul></div> <div class=...
大安市19137351300： div三列,左列宽度固定,右两列均分剩余宽度,请问用css怎么实现? - ？
吴逸唯健： <!doctype html><html><head> <title></title> <style> div { height: 200px; border: 0; } .clear:after { content: '\20'; clear: both; display: block; } .left { width: 150px; float: left; background-color: Yellow; } .content { margin-left: 150px; display: block; position: ...
大安市19137351300： 如何使用div+css布局网页成三行三列 - ？
吴逸唯健： DIV+CSS没办法像Table那样轻松的划分块.布局之前,必选先确定块,浮动的结构,不能任意的再拆分.你可以在Div内进行嵌套. 如有疑问追问,如满意记得采纳, 如果有其他问题也可点我名字向我求助 答题不易, 如果没有回答完全,请您谅解, 请采纳最快回答的正确答案!!谢谢!
大安市19137351300： div+css中三列横向并排列的代码？
吴逸唯健： css: .main{width:800px;} .lefts{float:left;width:250px;margin-right:10px;}html: <div class=＂main＂><div class=＂lefts＂>1列</div><div class=＂lefts＂>2列</div><div class=＂lefts＂>3列</div><div class=＂lefts＂>2行1列</div><div class=＂lefts＂>2行2列</div> </div>
大安市19137351300： div+css中三列横向并排列的代码 - ？
吴逸唯健： 三列布局的话,设置宽度小于总宽的1/3,然后全部浮动左float:left;就可以了..
大安市19137351300： 请问如何用 div+css 写一个 2 行 3 列的表格,有会的,请给写个实例, - ？
吴逸唯健： css样式: .box{width:306px;} .box ul{overflow:hidden;} .box ul li{float:left;width:100px;border:1px red solid;}div+css代码:<div class='box'><ul><li>1</li><li>1</li><li>1</li></ul><ul><li>2</li><li>2</li><li>2</li></ul> </div>具体看效果吧.
大安市19137351300： CSS+DIV一行三列(等宽高,有间距)怎么写 - ？
吴逸唯健： css:#id{width:100%答;height:100%;}#main>div{ float:left;width:33.3%;height:33.3%; line-height:33.3%;text-align:center; } html:<div id='main'> <div></div> <div></div> <div></div></div>
大安市19137351300： 纯CSS如何实现三列DIV等高布局 - ？
吴逸唯健： 如果要等高,前提是把高度固定好,然后让三个DIV左浮动在一个父DIV里面,没什么难的.
