两个同级div，如何并排且第二个充满剩余部分

最新推荐文章于 2023-07-04 11:02:47 发布

一顾永安

最新推荐文章于 2023-07-04 11:02:47 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： css div 并排充满 CSS3

本文链接：https://blog.youkuaiyun.com/AimeeChan/article/details/8894908

web前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过CSS解决div元素并排时未充满整行的常见问题，提供了两种解决方案：一种是给div元素设置宽度并使用绝对定位，另一种是利用CSS3的新特性。详细解释了每种方法的实现步骤和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，在没有设置任何样式情况下，浏览器默认同级的div宽度是充满整行的，即默认宽度最大化。正常情况下，为了使得这两个div并排，会使用float:left；然后发现二者确实并排了，但第二个div并没有充满剩余部分，因为有了浮动元素，默认宽度最小化。

在此，提供两种css的解决方案，其中一种是css3的解决方案。

以下是例子html代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: solid #000000 1px;
        }
 </style>
</head>
<body>
<div id = "first">first</div>
<div id = "second">second</div>
</body>
</html>

一种是给first设置宽度，且使用绝对定位。然后second的margin-left值为first宽度。使用绝对定位是因为绝对定位的元素并不占有文档空间，此时second的margin-left其实是相当于整个窗口来说。此方法还可以推广到三栏并列的情况。思想是左右栏使用绝对定位，并设置一定宽度，left和right分别为0，中间一栏的margin-left和margin-right分别为左右栏的宽度。

/*添加css代码*/
        #first{
            background-color: yellow;
            position: absolute;
            left: 0;
            width: 50px;
        }
        #second{
            margin-left: 50px;
        }

另一种使用css3的一个新特性，但该方法在我给的例子中，必须更改下html代码，且该方法在IE下无效，因为IE不支持css3的box-oriented和box-flex属性。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: solid #000000 1px;
            display: box;
            display: -webkit-box;
            display: -moz-box;
            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal
        }
        #first{
            background-color: yellow;
        }
        #second{
            background-color: green;
        }
        .flex{
            -webkit-box-flex: 1;/*在有多个box-flex属性时，其数值表示比例，此时只有一个box-flex属性，所以1代表充满*/
            -moz-box-flex:1;
        }

    </style>
</head>
<body>
<div>
    <div id = "first">first</div>
    <div id = "second" class = "flex">second</div>
</div>
</body>
</html>