Question

我是网页设计的新手。我想设计2个盒子，其中一个在左边，另一个在右边。这些框是在浏览器最大化状态下修复的，但是当我调整浏览器大小并使其最小化时，右框会向左下方框。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" >
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title>.: Home :.</title>
    </head>
    <body>
        <div class="main" >
            <div class="left" >&nbsp;</div>
            <div class="right" >
                <div class="search" >&nbsp;</div>
                <div class="login" >&nbsp;</div>
            </div>
        </div>
    </body>
</html>

的style.css

body {
    margin: 0px;
    padding: 0px;
    background-color: #c4c4c4;
}

div.main {
    width: 100%;
    display: inline-block;
    background-color: red;
}

div.left {
    float: left;
    width: 300px;
    height: 500px;
    margin-top: 50px;
    margin-left: 100px;
    display: inline-block;
    background-color: blue;
}

div.right {
    float: right;
    width: 800px;
    height: 500px;
    margin-top: 50px;
    margin-right: 100px;
    display: inline-block;
    background-color: green;
}

enter image description here

Answer 1

您需要在主DIV上使用固定宽度

div.main {
    width: 1350px;
    display: inline-block;
    background-color: red;
}

尽可能使用id而不是class，它更快，例如：class="main"可以是ID。

WORKING DEMO

修改

如果您想在主div上使用100％宽度，请使用固定宽度的包装div：

<div class="main" > <div id="wrapper" style="width:1350px;"> <div class="left" > </div> <div class="right" > <div class="search" > </div> <div class="login" > </div> </div> </div> </div>

Updated DEMO with 100% main DIV

Answer 2

原因是您的盒子宽度固定，有边距。如果您调整浏览器窗口的大小，使其小于并排显示两个框所需的空间量，则右侧框将显示在左侧框的下方，其中有空格。

您的说明中的详细信息无法解决此问题。但是，您应该尝试根据百分比设置布局（例如width:25%）。

Answer 3

将div.main宽度从％更改为px。您还可以设置最小宽度，以便浏览器在此之前不会减少元素。

在HTML中左右修复DIV

的style.css

3 个答案: