浮动box无法在父容器全部展示解决办法

发布时间：2024年01月10日

不知道大家在往一个父容器里装盒子的时候有没有遇到过这种情况

这种情况实在是太难受了，分析一下源码

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>test</title>

? ? <style>

? ? ? ? * {

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0

? ? ? ? }

? ? ? ? .father {

? ? ? ? ? ? width: 540px;

? ? ? ? ? ? height: 500px;

? ? ? ? ? ? background-color: pink;

? ? ? ? }

? ? ? ? .father ul li {

? ? ? ? ? ? margin-right: 10px;

? ? ? ? ? ? float: left;

? ? ? ? ? ? list-style: none;

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background-color: red;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div class="father">

? ? ? ? <ul>

? ? ? ? ? ? <li>1</li>

? ? ? ? ? ? <li>2</li>

? ? ? ? ? ? <li>3</li>

? ? ? ? ? ? <li>4</li>

? ? ? ? ? ? <li>5</li>

? ? ? ? ? ? <li>6</li>

? ? ? ? ? ? <li>7</li>

? ? ? ? ? ? <li>8</li>

? ? ? ? ? ? <li>9</li>

? ? ? ? ? ? <li>10</li>

? ? ? ? </ul>

? ? </div>

</body>

</html>

?可以看到在装第五个盒子的时候那个margin让第五个盒子无法装入，因为父容器的宽度不够

解决方法有二：

1.专门对边缘的盒子进行专门设置（不推荐）

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>test</title>

? ? <style>

? ? ? ? * {

? ? ? ? ? ? margin: 0;

? ? ? ? ? ? padding: 0

? ? ? ? }

? ? ? ? .father {

? ? ? ? ? ? width: 540px;

? ? ? ? ? ? height: 500px;

? ? ? ? ? ? background-color: pink;

? ? ? ? }

? ? ? ? .father ul li {

? ? ? ? ? ? margin-right: 10px;

? ? ? ? ? ? float: left;

? ? ? ? ? ? list-style: none;

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background-color: red;

? ? ? ? }

? ? ? ? .father .edge {

? ? ? ? ? ? margin-right: 0;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div class="father">

? ? ? ? <ul>

? ? ? ? ? ? <li>1</li>

? ? ? ? ? ? <li>2</li>

? ? ? ? ? ? <li>3</li>

? ? ? ? ? ? <li>4</li>

? ? ? ? ? ? <li class="edge">5</li>

? ? ? ? ? ? <li>6</li>

? ? ? ? ? ? <li>7</li>

? ? ? ? ? ? <li>8</li>

? ? ? ? ? ? <li>9</li>

? ? ? ? ? ? <li class="edge">10</li>

? ? ? ? </ul>

? ? </div>

</body>

</html>

专门对边缘盒子设置盒子margin-right为0就好，本质还是父容器宽度不够

2.改父容器宽度

其实把父元素宽度修改好适当的就好了，哈哈

文章来源:https://blog.csdn.net/AT181778/article/details/135492056
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章