CSS网页错位之DIV CSS宽度计算

百度谷歌搜狗

加关注：新浪微博腾讯微博

当前位置：首页 > HTML+CSS > CSS Hack > 源码

发布时间：2013-09-22 11:25 　来源/作者：藕码网　分类：CSS Hack

TAG标签：

摘要：左右结构中有1px边框实例

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; background:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
.zuo1{ float:left; width:300px; border:1px solid #F00; background:#CCC;}
.you1{ float:right; width:100px; background:#999; border:1px solid #F00;}
</style>
</head>
<body>
<p>错位事例：</p>
<div class="yangshi">
<div class="zuo1">左边</div>
<div class="you1">右边</div>
</div>
<p> </p>
<p>正确事例：</p>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>

素材详情
用户评论
相关文章

左右结构中有1px边框实例

一般左右结构中有1px边框，然后再加上有些边框这时我们设置左右结构时候就需要将此边框宽度与左右结构宽度计算在一起。
最新评论

验证码:

菜单/ Menu

热门下载/ HOT