0

我是网页设计的新手。我想设计 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>

样式.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;
}

在此处输入图像描述

在此处输入图像描述

4

3 回答 3

1

您需要在主 DIV 上固定宽度

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

在可能的情况下使用 id 而不是 class，它更快，例如：class="main"可以是一个 ID。

工作演示

编辑

如果您希望主 div 的宽度为 100%，则使用固定宽度的包装 div：

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

使用 100% 主 DIV 更新了 DEMO

于 2012-11-23T11:00:41.400 回答
0

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

您的描述中的详细信息无法解决此问题。但是，您应该尝试将布局基于百分比（例如width:25%）。

于 2012-11-23T11:05:25.863 回答
0

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

于 2012-11-23T11:09:14.917 回答