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

html-css010

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

给右列一设置margin：auto  50px  上下外边距不管，左右个50px

margin  意思是 简写属性在一个声明中设置所有外边距属性。

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0padding: 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>

实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。

例：

此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到 文字环绕 问题，如下如所示。

解决办法：

补充flex左右布局，左边固定，右边自适应，并且两列等高自适应

ul{

margin:0px

padding:0px

}

li{

float:left

width:76px/*这里要看你装的容器有多宽，宽度要能装下横向3个，但要小于4个的宽度，注意这里：这个宽度要加上你的设定的padding-left,所以li的实际宽度是100px*/

}

例子:

<div style="width:320px">/*这里建议div的宽度要大于3个LI的宽度*/

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>

</div>

100分拿来！