Question

我正试图让所有内容都集中在页面的大约80％。一切似乎都很好，除了我的两个主要div在我的横幅和导航栏上延伸大约1px，即使它们被设置为80％。

body {
  background: url('bg.png');
  background-size: cover;
  background-repeat: none;
}

.banner {
  font-family: 'Raleway', sans-serif;
  color: #f2f2f2;
  margin-top: 20px;
  text-align: center;
  background: url('bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  line-height: 120px;
  font-size: 40px;
  text-shadow: 2px 2px 2px black;
  width: 80%;
  height: 120px;
  margin: 0 auto;
}

.about {
  background-color: #333;
  opacity: 0.8;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 60%;
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
}

.stats {
  background-color: #333;
  opacity: 0.8;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 20%;
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
}

.logo {
  margin-top: 50px;
  font-family: myFirstFont;
  color: white;
  text-align: center;
  font-size: 50px;
}

.topnav {
  background-color: #333;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

<div class='logo'>
  The Realm MC
</div>

<div class="topnav" id="myTopnav">
  <a href="#home" class='active'><i class="fa fa-home" aria-hidden="true"></i>
     Home</a>
  <a href="#play"><i class="fa fa-play" aria-hidden="true"></i>
     Play</a>
  <a href="/forum"><i class="fa fa-comment-o" aria-hidden="true"></i>
     Forums</a>
  <a href="#donate" style="float: right; margin-right: 30px;"><i class="fa fa-heart-o" aria-hidden="true"></i>
     Donate</a>
</div>

<div class='banner'>
  There are 7 out of 10 players online!
</div>
<br />


<div id='wrapper' style='text-align:center;'>
  <div class='about'>
    Lorem ipsum<br /> dolor sit amet
  </div>

  <div class='stats'>
    Lorem ipsum<br /> dolor sit amet
  </div>
</div>

Answer 1

你还没有提及包装 div的任何内容，因此它被分配了100％的可用宽度，并且其中的div将相应地占用宽度。

尝试将约 div的宽度减少到59％，如下所示，这将使两个div位于宽度范围的80％范围内：

.about {
  background-color: #333;
  opacity: 0.8;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 59%;
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
}

这是小提琴：https://jsfiddle.net/rp1shr4t/

或者您可以设置 topnav div的宽度，然后相应地设置内部div的宽度。

Answer 2

这似乎工作正常。

＆＃13;

body{
  background: url('bg.png');
  background-size: cover;
  background-repeat: none;
}
 
.banner {
  font-family: 'Raleway', sans-serif;
  color: #f2f2f2;
  margin-top: 20px;
  text-align: center;
  background: url('bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  line-height: 120px;
  font-size: 40px;
  text-shadow: 2px 2px 2px black;
  width: 80%;
  height:120px;
  margin: 0 auto;
}
 
 
.about {
  background-color: #333;
  opacity: 0.8;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 60%;
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
}
.stats {
  background-color: #333;
  opacity: 0.8;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 20%;
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
}
 
.logo {
  margin-top: 50px;
  font-family: myFirstFont;
  color: white;
  text-align: center;
  font-size: 50px;
 
}
 
.topnav {
  background-color: #333;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

＆＃13;

<div class='logo'>The Realm MC</div>

<div class="topnav" id="myTopnav">
  <a href="#home" class='active'><i class="fa fa-home" aria-hidden="true"></i>Home</a>
  <a href="#play"><i class="fa fa-play" aria-hidden="true"></i>Play</a>
  <a href="/forum"><i class="fa fa-comment-o" aria-hidden="true"></i>Forums</a>
  <a href="#donate" style="float: right; margin-right: 30px;"><i class="fa fa-heart-o" aria-hidden="true"></i>Donate</a>
</div>
<div class='banner'>
    There are <?php echo $ServerStatus['numplayers'] . " out of " . $ServerStatus['maxplayers'] . " players online!"; ?>
</div>
<br/>
<div id='wrapper' style='text-align:center;'>    
  <div class='about'> 
    Lorem ipsum<br />        
    dolor sit amet    
  </div>    

  <div class='stats'>   
    Lorem ipsum<br />      
    dolor sit amet    
  </div>
</div>

＆＃13;

Answer 3

您必须为包装器分配width:80%。

使用float属性而不是display:inline-block。

所以，改变就像这样：

#wrapper {
    width: 80%;/*/<-------------------/*/
    margin: 0 auto;/*/<-------------------/*/
    box-sizing: border-box;/*/<-------------------/*/
}

.about {
  background-color: #333;
  opacity: 0.8;
  vertical-align: top;
  text-align: center;
  width: 70%;/*/<-------------------/*/
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
  float: left;/*/<-------------------/*/
  /*/-------Remove display:inline-block-----------/*/
}

.stats {
  background-color: #333;
  opacity: 0.8;
  vertical-align: top;
  text-align: center;
  width: 29%;/*/<---------1% for margin-left ----------/*/
  height: 300px;
  font-family: 'Raleway', sans-serif;
  color: white;
  float: right;/*/<-------------------/*/
   /*/-------Remove display:inline-block-----------/*/
}

这是 Demo

将所有元素居中到一定宽度

3 个答案: