Question

在浏览器中打开时，两个div的组合宽度不能完全满足主体的宽度。我已经将第二个（右）div的背景颜色设为黑色，这样您就可以看到第二个div和页面右侧之间的空白区域。我试着弄乱边界，边缘，但也许我做错了。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="home2.css">
</head>

<body>
<div id="wrapper">
    <main>
        <div id="div1">
            <img src="font-header.png" alt="Image Logo Header">
        </div>
        <div id="div2">
        </div>
    </main>
</div>
</body>
</html>

CSS：

img {
    border-bottom: 4px solid black;
    position: relative;
    left: 30px;
}
body {
    margin: 0;
}
#div1 {
    height: 756px;
    width: 300px;
    border: 2px solid black;
    float: left;
}
#div2 {
    height: 758px;
    width: 1216px;
    overflow: hidden;
    background-color: black;
}

Answer 1

由于您使用的是固定宽度，因此无法正确调整屏幕。并且在不同的分辨率下，它将无法正确调整屏幕尺寸。而是使用％width。

我已经用你的例子设置了这个小提琴：https://jsfiddle.net/5yfnLcdt/

Answer 2

绝对定位div并应用媒体查询，以便他们能够快速响应。希望这会有所帮助。

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Form Example</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="home2.css">

    <style>

        img {
        border-bottom: 4px solid black;
        position: relative;
        left: 30px;
        }
        body {
            margin: 0;
            width: 100%;
        }
        #div1 {
            height: 756px;
            width: 25%; //change width to fit your need
            border: 2px solid black;
            float: left;
            left:0;
            position: absolute;
        }
        #div1 img{
            left: 0;
        }
        #div2 {
            height: 758px;
            width: 75%; //change width to fit your need
            overflow: hidden;
            background-color: blue;
            right:0;
            position: absolute;
        }

    </style>
    </head>

    <body>
    <div id="wrapper">
        <main>
            <div id="div1">
                <img src="font-header.png" alt="Image Logo Header">
            </div>
            <div id="div2">
            </div>
        </main>
    </div>
    </body>
    </html>

如何获得两个div来填充页面宽度

2 个答案: