Question

我正在创建一个网站（不是真正的网站，只是为了练习）。

在顶部，我有一个长标准，标题将会出现，这很好。在这下面，我想要两个较小的盒子和每一面（在同一行）。

中间应该有一个间隙，位于标题框下方和两个较小的框之间。

我试图使用“左”和“右”百分比来制作它，每个盒子只有25％在它的各自一侧，在中间留下50％的间隙。什么时候

我启动了这个代码，它有标题栏确定，但是一个长条占据了它下面75％的屏幕，而不是我想要的。

请帮助，但尝试解释，因为我是一个12岁，刚刚开始编码！您可以在下面看到代码...

请参阅代码段

body {
  background-image: url("http://res.freestockphotos.biz/pictures/8/8990-close-up-of-a-green-hedge-pv.jpg");
}

#backgroundbox {
  width: 100% position: absolute;
  margin: auto;
  height: 150px;
  background-color: #66ff66;
  border: 15px solid #00cc00;
}

#navl {
  background-color: #66ff66;
  border: 15px solid #00cc00;
  border-top-width: 0px;
  position: absolute;
  left: 0.6%;
  right: 25%;
  height: 75px;
}

#navr {
  background-color: #66ff66;
  border: 15px solid #00cc00;
  border-top-width: 0px;
  position: absolute;
  left: 75%;
  right: 99.4%;
  height: 75px;
}

<body>
  <div id="backgroundbox"></div>
  <div id="navl"></div>
  <div id="navr"></div>
</body>

Answer 1

这应该很容易通过左右float来解决，然后决定每个方框的width Here is a working example我删除了您的position left和right属性

＆＃13;

body {
  background-image: url("http://res.freestockphotos.biz/pictures/8/8990-close-up-of-a-green-hedge-pv.jpg");
  }
  
  #backgroundbox {
  width: 100%
  position: absolute;
  margin: auto;
  height: 150px;
  background-color: #66ff66;
  border: 15px solid #00cc00;
  }

  #navl {
  background-color: #66ff66;
  border: 15px solid #00cc00;
  border-top-width: 0px;
  float: left;
  height: 75px;
  width: 25%;
  }
  
  #navr{
  background-color: #66ff66;
  border: 15px solid #00cc00;
  border-top-width: 0px;
  float: right;
  height: 75px;
  width: 25%;
  }

＆＃13;

<body>
<div id="backgroundbox"></div>
<div id="navl"></div><div id="navr"></div>
</body>

＆＃13;

Answer 2

你不是白痴，你只是在学习，我们都是从某个地方开始的。除了CSS之外，我仍然处于黑暗中......所以...

无论如何，您要以％为单位指定您的位置，这仅在先前指定父容器的高度和宽度时才有效。尝试将主体的宽度和高度指定为100％或更好，创建一个容器div，将所有其他div嵌套在其中，并指定此容器div的高度和宽度均为100％。此外，在#backgroundbox的宽度规范之后，您将缺少分号。

Answer 3

我想我找到了一个解决方案：

试一试：

<!DOCTYPE html>
<html>

<head>
    <title>ASGD</title>
    <link rel="shortcut icon" href="https://i.imgur.com/Ug8Tx59.png">
    <style>
        body {
            background-image: url("http://res.freestockphotos.biz/pictures/8/8990-close-up-of-a-green-hedge-pv.jpg");
        }

        #backgroundbox {
            width: 100% position: absolute;
            margin: auto;
            height: 150px;
            background-color: #66ff66;
            border: 15px solid #00cc00;
        }

        #navl {
            background-color: #66ff66;
            border: 15px solid #00cc00;
            border-top-width: 0px;
            position: absolute;
            left: 0.6%;
            height: 75px;
            width: 100px;
        }

        #navr {
            background-color: #66ff66;
            border: 15px solid #00cc00;
            border-top-width: 15px;
            border-top-width: 0px;
            position: absolute;
            right: 0.6%;
            height: 75px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="backgroundbox"></div>
    <div id="navl"></div>
    <div id="navr"></div>
</body>

</html>

以下是预览链接：https://codepen.io/ziruhel/pen/zPYgZa

'左'和'右'CSS不起作用

3 个答案: