中间内容的右侧如何设置呢？一直设置不了。还有其他的代码对吗？有没有可以改善的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
font-family:"微软雅黑";
}
a{
color:white;
text-decoration:none;
}
li{
list-style-type:none;
}
.container{
width:100%;
height:auto;
background:#fff;
}
.header{
width:100%;
height:100px;
background:black;
}
.header .logo{
float:left;
height:100%;
}
.header .logo img{
display:block;
}
.header .nav-1{
float:right;
height:100%;
}
.header .nav-1 ul li{
display:inline-block;
text-align:center;
line-height:100px;
margin:0 15px;
}
.clear{
clear:both;
}
.content{
width:100%;
height:800px;
background:#ff5637;
}
.content .left{
float:left;
width:30%;
height:100%;
position:relative;
top:0;
}
.content .left .left-1{
width:90%;
position:absolute;
top:100px;
left:50px;
}
h1{
height:30px;
line-height: 30px;
font-size:20px;
}
.content .left .left-1 li{
margin:10px 0;
}
.content .left .left-1 li span{
margin-right:10px;
}
.content .left .left-1 li .lj{
background:#d67486;
}
.content .middle{
float:left;
width:30%;
height:100%;
position: relative;
top:0;
border-right:solid 3px purple;
}
.content .middle .middle-1{
position:absolute;
top:100px;
left:50px;
}
.content .middle .middle-1 li{
margin:10px 0;
}
.content .middle .middle-1 li span{
margin-right:10px;
}
.content .right {
float:left;
}
.footer{
width:100%;
height:100px;
background:black;
}
.footer ul{
display:inline-block;
text-align:center;
line-height:100px;
width:100%;
}
.footer li{
display:inline-block;
margin:0 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<form>
<div class="header">
<div class="logo">
<a href="#">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/>
</a>
</div>
<div class="nav-1">
<ul>
<Li><a href="#">课程</a></Li>
<Li><a href="#">职业路径</a></Li>
<Li><a href="#">实战</a></Li>
<Li><a href="#">猿问</a></Li>
<Li><a href="#">手记</a></Li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="left">
<div class="left-1">
<h1>课程推荐</h1>
<ul>
<li><span class="lj">职业路径</span><span>HTML5与CSS3实现动态网页</span></li>
<li><span class="lj">职业路径</span><span>零基础入门Android语法与界面</span></li>
<li><span class="lj">职业路径</span><span>IQS基础语法与常用控件</span></li>
<li><span class="lj">职业路径</span><span>PHP入门开发</span></li>
<li><span class="lj">职业路径</span><span>JAVA入门开发</span></li>
</ul>
</div>
</div>
<div class="middle">
<div class="middle-1">
<h1>相关课程</h1>
<ul>
<li><span >HTML</span><span>CSS</span><span>JavaScript</span></li>
<li><span >HTML5</span><span>CSS3</span><span>Jquery</span></li>
<li><span >移动端基础</span><span>移动端APP开发</span></li>
</ul>
</div>
</div>
<div class="right">
<div class="right-1">
<h1>登录</h1>
<div class="zhanghao"><input type="text" name="mz" placeholder="请输入登录邮箱/手机号" size="20"></div>
<div class="mima"><input type="password" name="pw" placeholder="请输入6-16为密码，区分大小写，不能有空格" maxlength="16" size="20"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<ul>
<li><a href="#">网页首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</form>
</div>
</body>
</html>
正在回答
同学你好，问题解答如下：
1、右侧设置宽度为40%会换行是因为中间区域有3px的边框，占据的宽度为30%+3px，右侧设置的宽度需要小于40%。可以设置为39%，然后右浮动显示
2、中部右侧部分的宽度设置为auto时，使用调试工具时宽度为0。这是因为内容right-1设置了绝对定位脱离文档流，撑不起父元素，所以right盒子没有宽高。是正常的。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星