关于浮动的问题,求助
本帖最后由 kazei 于 2019-4-13 22:07 编辑html部分代码:
<body>
<div class="header">
<div class="jianli">
<h2>简历</h2>
</div>
</div>
<div class="content">
<div class="jiben">
<div class="left">
<h2>基本信息</h2>
</div>
<div class="right">
<ul>
<li><b>姓名</b> jeff</li>
<li><b>性别</b> 男</li>
<li><b>应聘职位<b/> web前端工程师</li>
</ul>
</div>
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="lianxi">
<div class="left">
<h2>联系方式</h2>
</div>
<div class="right">
<ul>
<li><b>手机</b> 12580</li>
<li><b>Email</b> 123@qq.com</li>
<li><b>个人主页</b> <a href="#">blog</a></li>
</ul>
</div>
</div>
<div class="nengli">
<div class="left">
<h2>能力描述</h2>
</div>
<div class="right">
<p>
<b>技术能力</b><br />
熟练掌握HTML,CSS,JavaScript
</p>
<p>
<b>综合能力</b><br />
良好的沟通,主动积极,努力勤奋
</p>
</div>
</div>
</div>
</body>
CSS代码:
body{
margin:0;
padding:0;
}
ul{
margin:0;
padding:0;
}
li{
display:inline;
padding-right:20px;
}
.jianli{
background-color:grey;
width:100%;
border:1px solid #000000;
padding-left:20px;
}
.left{
background-color:#C8C8C8;
width:10%;
height:120px;
text-align:center;
float:left;
clear:both;
border:1px solid #6699CC;
}
.right{
width:89%; <!-- 这里90%的话不是和.left部分刚好够100%么。但实际会换行,希望知道的朋友帮下忙,感谢,-->
height:120px;
float:left;
border:1px solid #6699CC;
}
因为.right 和.left 的border属性都设置了1px的大小,这条线是会占据整个页面的空间的,所以你right设置90%的时候,总大小已经超过了100%,就会换行 Assassin兜兜 发表于 2019-4-14 21:32
因为.right 和.left 的border属性都设置了1px的大小,这条线是会占据整个页面的空间的,所以你right设置90% ...
谢谢
页:
[1]