二列宽度自适应布局

最新推荐文章于 2021-06-15 13:27:27 发布

codeshark

最新推荐文章于 2021-06-15 13:27:27 发布

阅读量685

点赞数

分类专栏： Div+CSS 文章标签： xhtml float html css div

本文链接：https://blog.csdn.net/codeshark/article/details/2626774

版权

Div+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

从“一列宽度自适应布局”我们可以知道，设定自适应主要是通过宽度的百分比值来实现，因此在“二列宽度自适应布局”中，同样是采用百分比来指派。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>二列宽度自适应布局</title>

<style type="text/css">

#left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}

#right{background-color:#cccccc;border:2px solid #333333;width:70%;height:300px;float:left;}

/*本例中div使用了float:left之后，表示右侧的内容将流动到当前对象的右侧*/

</style>

</head>

<body>

<div id="left"></div>

<div id="right"></div>

</body>

</html>

问题：为什么不是20%+80%=100%了？

原因：在CSS布局中，一个对象的宽度不是由width的值来唯一确定的。对象的真实宽度是由对象的宽＋对象的左右外边距＋左右边框＋内边距（盒子模型）。

codeshark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二列宽度自适应布局

从“一列宽度自适应布局”我们可以知道，设定自适应主要是通过宽度的百分比值来实现，因此在“二列宽度自适应布局”中，同样是采用百分比来指派。二列宽度自适应布局#left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}#r
复制链接

扫一扫