2-11红线离右侧的距离不会设置，以及红线不能贯穿内容页面。请老师帮我检查一下问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
padding:0;
margin:0;
}
.back{
width:100%;
height:100px;
background:#444;
top:0;
}
.logo{
width:300px;
height:100px;
float:left;
}
.one{
list-style:none;
float:right;
}
.one li{
display:inline-block;
line-height:100px;
font-size:20px;
color:white;
padding:0 40px;
white-space:nowrap;
}
a{
text-decoration:none;
color:white;
}
.clear{
clear:both;
}
.container{
width:100%;
height:800px;
background:lightblue;
}
.left{
width:30%;
height:500px;
float:left;
line-height:2em;
margin-left:5%;
margin-top:100px;
}
.middle{
width:30%;
height:500px;
float:left;
line-height:2em;
margin-top:100px;
}
.right{
width:25%;
height:500px;
float:right;
line-height:2em;
margin-top:100px;
border-left:3px solid #FF7256;
}
span{
background:red;
}
.footer{
width:100%;
height:100px;
background:#444;
bottom:0;
}
.footer ul{
list-style:none;
text-align:center;
}
.footer ul li{
display:inline-block;
line-height:100px;
color:white;
padding:0 40px;
white-space:nowrap;
font-size:20px;
}
.submit{
width:100px;
height:50px;
background:red;
color:white;
}
</style>
</head>
<body>
<div class="back">
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></a></div>
<ul class="one">
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="container">
<div class="left">
<h3>sadd</h3>
<p><span>sdd</span>sdsds</p>
<p><span>sdd</span>sdsds</p>
<p><span>sdd</span>sdsds</p>
<p><span>sdd</span>sdsds</p>
<p><span>sdd</span>sdsds</p>
</div>
<div class="middle">
<h3>sadd</h3>
<p>sddsdsds</p>
<p>sddsdsds</p>
<p>sddsdsds</p>
</div>
<div class="right">
<h3>sds</h3>
<form>
<input type="text" name="username" placeholder="请输入姓名"><br/>
<input type="password" name="pasword" placeholder="mima"><br/>
<input type="submit" class="submit" value="登陆">
</form>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
</ul>
</div>
</body>
</html>
正在回答
测试了你的代码，建议在右侧区域再嵌套一层div，参考代码：
样式：
如果最为border边框来设置的话，给content设置与外层盒子container相同的高度，上边距用padding值来设置，添加box-sizing:border;是让元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。（这是css3的属性）。不会影响right整体的高度。
也可以作为单独的一个div来设置，也就是把中间分为了4部分，可以使用宽高来完成。
自己再测试下，祝学习愉快~~
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星