您的位置：首页 > Web前端 > CSS

div 2 列 50%宽度布局

2016-08-30 00:01 811 查看

要点

1. 子元素 one，two不可设置 margin-left，margin-right，border-left，border-right，padding-left，padding-right

2. 子元素one, two设置为float: left; width:50%;

3. 子元素one，two再包裹一层子元素，在包裹的子元素中填充实际的内容，子元素可以设置外边距，边框和内边框，但不可再设置width为100%，因为父元素 width = 子元素width + 子元素padding + 子元素margin + 子元素border，如果设置 width为100%，则父元素widh容纳不下子元素了

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<style>
.container {
width: 800px;
border: solid red 1px;
height: 800px;
padding: 5px;
}

.one,
.two {
width: 50%;
height: 100%;
float: left;
border-bottom: solid green 1px;
border-top: solid green 1px;
padding-top: 5px;
}

span {
display: block;
border: solid black 1px;
padding: 5px;
height: 89%;
}

span:first {
border-right: none;
}
</style>
</head>

<body>
<div class="container">
<div class="one">
<span>one</span>
</div>
<div class="two">
<span>two</span>
</div>
</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html div css

相关文章推荐

新的分享

章节导航