Question

最终发生的事情是两列不能彼此并排，而不会将宽度缩小约2％。这样做会导致边缘不与标题对齐，它只是看起来不对。是否有关于'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 Web Doc的信息。

默认情况下，在CSS框模型中，您指定的宽度和高度   element仅应用于元素的内容框。如果元素   有任何边框或填充，然后将其添加到宽度和高度   达到在屏幕上呈现的框的大小。这个   意味着当您设置宽度和高度时，您必须调整值   你允许任何可能添加的边框或填充。

box-sizing属性可用于调整此行为：



content-box为您提供默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则表示元素的内容   框将是100像素宽，以及任何边框或填充的宽度   将被添加到最终渲染宽度。



border-box告诉浏览器在您为宽度和高度指定的值中考虑任何边框和填充。如果你   将元素的宽度设置为100像素，即100像素   包括您添加的任何边框或填充，以及内容框   将缩小以吸收额外的宽度。这通常是成功的   更容易确定尺寸元素。

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

在MDN Web Docs

中阅读更多信息

* {
  box-sizing:border-box;
}

＆＃13;

* {
  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;
    }
}

＆＃13;

<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>

＆＃13;

这是小提琴Link。您可以扩展和缩小屏幕大小，并查看它的反应方式。

Answer 2

填充和边框计算宽度。所以你必须减去它们。

在你的情况下你可以做到

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

我有2列<div>，宽度相互对齐

2 个答案: