扩展盒子的高度

最新推荐文章于 2022-12-18 20:52:39 发布

kilimanjar0

最新推荐文章于 2022-12-18 20:52:39 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签：扩展 border float class div html

本文链接：https://blog.csdn.net/kilimanjar0/article/details/6633244

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

三个盒子都不在标准流中，div是没有高度的。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float属性</title>
<style type="text/css">
</head>
<body>
<div class="father">
<div class="son1">Box-1</div>
<div class="son2">Box-2</div>
<div class="son3">
Box-3
<br>
Box-3
<br>
Box-3
<br>
Box-3
</div>
<div class="clear"></div>
</div>
</body>
</html>

body {
    font-family: Arial;
    font-size: 12px;
    margin: 15px;
}
.father {
    background-color: #FFFF99;
    border: 1px solid #111111;
    padding: 5px;
}
.father div {
    background-color: #90BAFF;
    border: 1px dashed #111111;
    margin: 15px;
    padding: 10px;
}
.father p {
    background-color: #FF90BA;
    border: 1px dashed #111111;
    clear: right;
}
.son1 {
    float: left;
}
.son2 {
    float: left;
}
.son3 {
    float: right;
}
.father .clear {
    border: 0 none;
    clear: both;
    margin: 0;
    padding: 0;
}

下面是CSS：

.son1 {float:left;}

.son2 { float: left;}

.son3 { float: right;}

.father .clear { border: 0 none; clear: both; margin: 0; padding: 0;}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kilimanjar0

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
扩展盒子的高度

Box-1Box-2Box-3Box-3Box-3Box-3.son1 { float: left;}.son2 { float: left;}.son3 { float: right;}.father .clear { border: 0 none; clear: both;
复制链接

扫一扫