html - 我有 2 列 并且宽度相互挤压

Question

最终发生的情况是，如果不将宽度缩小约 2%，则两列不能并排放置。这样做会导致边缘与标题不对齐，并且看起来很不合适。关于“宽度”或“填充”我是否遗漏了什么？

这就是我要模拟的:https://www.w3schools.com/howto/howto_css_blog_layout.asp

这是最终发生的事情(在将宽度更改为 -2% 之前):

当我必须改变宽度时会发生什么:

body {
  padding: 20px;
  background: #f1f1f1;
}

.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

.leftcolumn {
  float: left;
  width: 75%;
}

.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

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

.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

@media(max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

<div class="header">
  <h2>Harry's Den</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>I love the World</h2>
      <h5>Helloo!</h5>
      <p>Text!</p>
    </div>
    <div class="card">
      <h2>Wow this works so far!</h2>
      <h5>I am just happy to have a semi-functional blog!</h5>
      <p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me!</h2>
      <p>University: Texas Tech University</p>
      <p>Major: Computer Engineering (BS)</p>
      <p>Minor: Mathematics</p>
      <p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
    </div>
    <div class="card">
      <h3>Follow Me!</h3>
      <a href="https://twitter.com/account">Twitter</a>
      <br/>
      <a href="https://www.facebook.com/account">Facebook</a>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Developed by Barry Allen</h2>
  <h2>Quantum Enterprise Projects</h2>
</div>

Answer 1

这是来自 MDN 网络文档的信息。

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height you have to adjust the value you give to allow for any border or padding that may be added.

The box-sizing property can be used to adjust this behavior:

• content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.

• border-box tells the browser to account for any border and padding in the values you specify for width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

您必须使用 box-sizing:border-box 来包含元素宽度中包含的所有边框、填充和边距。

阅读更多信息 MDN Web Docs

* {
  box-sizing:border-box;
}

* {
  box-sizing:border-box;
}
body{
    padding: 20px;
    background: #f1f1f1;
}
.header{
    padding: 30px;
    font-size: 40px;
    text-align: center;
    background: white;
}
.leftcolumn{
    float: left;
    width: 75%;
}
.rightcolumn{
    float: left;
    width: 25%;
    padding-left: 20px;
}
.card{
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}
.row:after{
    content: "";
    display: table;
    clear: both;
}
.footer{
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}
@media(max-width: 800px){
    .leftcolumn, .rightcolumn{
        width: 100%;
        padding: 0;
    }
}

<div class="header">
        <h2>Harry's Den</h2>
    </div>
    <div class="row">
        <div class="leftcolumn">
            <div class="card">
                <h2>I love the World</h2>
                <h5>Helloo!</h5>
                <p>Text!</p>
            </div>
            <div class="card">
                <h2>Wow this works so far!</h2>
                <h5>I am just happy to have a semi-functional blog!</h5>
                <p>Yay! I do not have much to say other than I am happy to have made it this far. Hopefully this will help!</p>
            </div>
        </div>
        <div class="rightcolumn">
            <div class="card">
                <h2>About Me!</h2>
                <p>University: Texas Tech University</p>
                <p>Major: Computer Engineering (BS)</p>
                <p>Minor: Mathematics</p>
                <p>Interests: Energy Infrastructure and Space Exploration Efforts</p>
            </div>
            <div class="card">
                <h3>Popular Post</h3>      
            </div>
            <div class="card">
                <h3>Follow Me!</h3>
                <a href="https://twitter.com/account">Twitter</a>
                <br/>
                <a href="https://www.facebook.com/account">Facebook</a>
            </div>
        </div>
    </div>
    <div class="footer">
        <h2>Developed by Barry Allen</h2>
        <h2>Quantum Enterprise Projects</h2>
    </div>

这是 fiddle Link .您可以扩大和缩小屏幕尺寸，并查看它的 react 。