kazei 发表于 2019-4-13 22:07:48

关于浮动的问题,求助

本帖最后由 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;
}


Assassin兜兜 发表于 2019-4-14 21:32:24

因为.right 和.left 的border属性都设置了1px的大小,这条线是会占据整个页面的空间的,所以你right设置90%的时候,总大小已经超过了100%,就会换行

kazei 发表于 2019-4-15 14:04:03

Assassin兜兜 发表于 2019-4-14 21:32
因为.right 和.left 的border属性都设置了1px的大小,这条线是会占据整个页面的空间的,所以你right设置90% ...

谢谢
页: [1]
查看完整版本: 关于浮动的问题,求助