Question

我制作了一面法国国旗，希望这能保持与浏览器边缘相同的余量。容器的比例可能会改变。下图显示了我的所作所为。

只有顶部和左边距可以按我的要求工作。我打算margin: 0 0;将差距始终保持为0;但是右边和底部都不起作用。

那么我可以平均设置所有边距吗？这是整个代码。

#wrap {
  /*I've tried to change this part*/
  position: absolute;
  width: 90%;
  height: 90%;
  /*height: 500px;*/
  margin: 0 0;
  border: 4px solid #000;
}
#wrap div {
  width: 33.3333333333%;
  height: 100%;
  display: inline-block;
}
#wrap div:first-child {
  margin-right: 33.3333333333%;
  background: #003153;
}
#wrap div:first-child + div {
  background: #cc3333;
}

<!DOCTYPE HTML>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <title>Document</title>
</head>

<body>
  <div id="wrap">
    <div></div>
    <div></div>
  </div>
</body>

</html>

Answer 1

默认情况下，浏览器为正文设置边距，这导致了问题。为margin:0设置body 将#wrap的宽度更改为100％

body
        {
            margin:0;
        }

 #wrap{ 
                    position: absolute;
                    width:100%;
                    height:90%;
                    /*height: 500px;*/
                    margin: 0 0;
                    border:4px solid #000;}

Answer 2

对于您的换行使用left: 5%;

也只使用margin: 0;而不是margin: 0 0;

Answer 3

以下是我将如何处理这个......

将HTML更改为..

<div id="wrap">
  <div class="blue"></div>
  <div class="white"></div>
  <div class="red"></div>
</div>

然后像这样设置块。

.blue {
   background: #003153;
 }

.red {
   background: #cc3333;
 }

.white {
   background: #FFF;
 }

对于容器使用......

 #wrap {
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #000;
    font-size: 0; /* necessary to remove space between divs */
  }

  #wrap div {
    width: 33.3333333333%;
    height: 100%;
    display: inline-block;
  }

CODEPEN

#wrap {
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 4px solid #000;
  font-size: 0;
  /* necessary to remove space between divs */
}
#wrap div {
  width: 33.3333333333%;
  height: 100%;
  display: inline-block;
}
.blue {
  background: #003153;
}
.red {
  background: #cc3333;
}
.white {
  background: #FFF;
}

<div id="wrap">
  <div class="blue"></div>
  <div class="white"></div>
  <div class="red"></div>
</div>

我希望<div>位于确切的中心;不知道如何处理底部和右边距

3 个答案: