|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 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%，就会换行
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-4-13 22:07:48
置顶卡
千斤顶
显身卡
发表于 2019-4-14 21:32:24
楼主