时间戳

首页 > 解决方案 > 具有相同宽度的两个元素显示的宽度不同

html - 具有相同宽度的两个元素显示的宽度不同

问题描述

我正在尝试显示三个带有文本的边框元素。当宽度下降到 1550px（将来会改变的值）以下时，两个浮动元素应该取消浮动并占据整个宽度。但是，当我将它们设置为 100% 时，它们大于主体宽度的 100%，我不知道为什么，因为它们似乎应该与我的主标题类具有相同的宽度，该类也继承了主体宽度。

body {
  font-family: 'Fira Mono', monospace;
  background-color: #323232;
  color: #ecebe7;
  width: 70%;
  margin: auto;
  padding: 0;
  text-shadow: 0 .0625rem #807b7a;
  font-size: 1.25rem;
}

h1 {
  font-size: 4.0rem;
  text-shadow: 0 .25rem #807b7a;
  margin-bottom: 20px;
}

h2 {
  font-size: 2.0rem;
  text-shadow: 0 .125rem #807b7a;
  margin: auto;
  padding-bottom: 10px;
}

p {
  letter-spacing: .15rem;
}


/* Class Selectors */

.main-header {
  text-align: center;
  border-bottom: 3px solid #ecebe7;
  border-top: 3px solid #ecebe7;
  border-right: 3px solid #ecebe7;
  border-left: 3px solid #ecebe7;
  box-shadow: 0 3px #807b7a;
  background-color: #212121;
  margin: 30px 0;
}

.empire {
  border-bottom: 3px solid #ecebe7;
  border-top: 3px solid #ecebe7;
  border-right: 3px solid #ecebe7;
  border-left: 3px solid #ecebe7;
  box-shadow: 0 3px #807b7a;
  background-color: #212121;
  margin-bottom: 30px;
  margin-right: 15px;
  padding: 10px;
  width: 45%;
}

.anghardi {
  border-bottom: 3px solid #ecebe7;
  border-top: 3px solid #ecebe7;
  border-right: 3px solid #ecebe7;
  border-left: 3px solid #ecebe7;
  box-shadow: 0 3px #807b7a;
  background-color: #212121;
  margin-bottom: 30px;
  margin-left: 15px;
  padding: 10px;
  width: 45%;
}


/* Floating */

.empire {
  float: left;
}

.anghardi {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Media Queries */

@media (max-width: 1550px) {
  .empire,
  .anghardi {
    float: none;
    margin: 30px 0;
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Galgoma's War</title>
  <link rel="stylesheet" type="text/css" href="style/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet">
</head>

<body>
  <header id="top" class="main-header">
    <h1>The War of Galgoma</h1>
    <h2>An adventure entirely within the mind of the great Galgoma</h2>
  </header>

  <div class="empire clearfix">
    <h2>The Opal Empire</h2>
    <p>The Opal Empire have mostly tolerated the Anghardi since they showed up two centuries ago on the eastern edge of the nation. Recently, attacks on outer settlements have been continuously reported and the Opal Empire plans on wiping out the marauders
      and claiming the new land as their own. Despite expecting an easy victory, the Empire has had considerable difficulty ridding themselves of the Anghardi and now face a critical battle. If the Anghardi win the three valleys, they may be able to ally
      with other small groups of marauders and become a dangerous foe.</p>
  </div>

  <div class="anghardi clearfix">
    <h2>The Anghardi</h2>
    <p>The Anghardi bravely defend their conquered land. Two centuries ago they made their presence known in the eastern realms and they have held and developed these lands since. They will not give way to the scum from the Empire. Opportunity awaits if
      they can just muster enough strength to reach out to other similar groups and turn on the Empire. This may be their last stand before the army of the Empire gains ground and takes control of the three valleys, a strategic position that will surely
      turn the tide of the war.</p>
  </div>

</body>

</html>

当浏览器的宽度达到 1550px 最大宽度并应用媒体查询时，由于某种原因，.empire类和.anghardi类都变得超过 100%，这是我的问题。

标签： htmlcss

解决方案

Header 没有padding， div 有10px Both 有 100% width 和 default content-sizing: content-box。因此，它们的内容宽度相同，但border-box宽度不同。

你可以

  • 向标题添加填充

  • 将它们都设置好content-sizing: border-box，那么框的宽度将正好是 body 的 100%（现在它是 100%+20px 的 div）。45% 的宽度看起来很奇怪，你可能想把它改成calc(50% - 15px)什么的。

推荐阅读