我有 2 列 <div> 并且宽度相互挤压

Question

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

这就是我要模仿的：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>

这里是FiddleLink。您可以扩大和缩小屏幕的大小，并查看它的反应。

Answer 2

内边距和边框算在宽度内。所以你必须减去它们。

在你的情况下你可以

.rightcolumn {
    width: calc(25% - 20px); 
}

我有 2 列 <div> 并且宽度相互挤压

I have 2 columns with <div> and the widths keep edging each other out

html

css

padding

width