老师，检查下。

首页课程实战体系课手记专栏慕课教程

老师，检查下。

来源：3-3 编程练习

qq_久坠深海_0

2020-03-18 23:13:39

<!DOCTYPE html>

<html>

<head>

html ul{padding:0;margin:0;list-style:none;}

.header{width:100%;/*min-width:90%*/height:100px;overflow:hidden;background-color:black;}

.one{float:left;}

img{display:block;}

.header ul{float:right;}

.header li{display:inline-block;padding:0 40px;line-height:100px;font-size:18px;}

a{color:white;text-decoration:none;cursor:pointer; }

a:hover{color:orange;}

/*圣杯布局样式*/

.content{padding:0 250px 0 350px; }

.middle,.left,.right{position:relative;float:left; }

.middle{height:700px;width:100%;background-color:pink; float:left;}

.middle img{ position:absolute; display:block; top:0;bottom:0;left:0;right:0;margin:auto; }

.left{width:350px; height:700px;background-color:yellow; float:left;margin-left: -100%; left:-350px; }

h3,p{ padding-top:10px;padding-left:20px;}

span{background-color:deeppink;}

.right{width:250px; height:700px;background-color:skyblue;float:left; margin-right:-250px;}

.right input{ width:170px;height:30px;display:inline-block;font-size:16px;margin-top:20px; margin-left:20px;border:none;}

.right-one{background-color:red;border:none;}

.footer{width:100%;height:100px;background-color: black;float:right;text-align:center; }

.footer-one{color:white; }

.footer-one li {list-style:none;display:inline-block; line-height:100px; padding:0 20px;}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</div>

<p><span>职业路径</span>   html与css3实现动态网页</p>

<p><span>职业路径</span>   零基础入门android语法与界面</p>

<p><span>职业路径</span>   ios基础语法与常用控件</p>

<p><span>职业路径</span>   php入门开发</p>

<p><span>职业路径</span>   jave入门开发</p>

</div>

</div>

</ul>

</div>

</body>

</html>

问1，左边内容有很多外右边距这个是不影响的吗？为什么用右边的内容没有，而且如果使用右边内容的方法去对齐对左边内容不管用。

问2，图片居中使用这个方法行吗？开始本来是想用相对定位做一个负的偏移的，发现写不来，老师可以教一下吗？

写回答

2回答

好帮手慕星星

2020-03-20

同学你好，问题解答如下：中间三个元素都是浮动的

只不过middle元素设置了宽度为100%，导致后面两个换行显示。如果想要left移动到最左边，就需要设置，margin-left值为-100%。left移动到左边之后，right就会在middle的右侧（还是换行的），那么设置margin-left值为自身宽度（负值）就会移动到middle右侧，在同一水平线上。

自己可以再测试理解下，祝学习愉快！