1

为什么“主要”部分边界被“旁”部分卡住了？为什么“旁边”部分和“主要”部分边界之间没有喘息的空间？ 在此处输入图像描述

aside {
  float: left;
  width: 25%;
  padding: 10px;
}

main {
  border: 3px solid gray;
  padding: 10px;
  margin-left: 25%;
}
<aside>
  <h2>The standard Lorem Ipsum passage</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
</aside>
<main>
  <h2>What is Lorem Ipsum?</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
</main>

4

2 回答 2

3

实际上，property 的默认值默认box-sizing设置为content-box，表示元素的heightandwidth是根据内容的大小计算的，而不是它的padding, marginand border。所以你应该box-sizing: border-box;为每个你希望它的元素使用padding,margin和border(size) 值影响它的最终尺寸。

* {
  box-sizing: border-box;
}

aside {
  float: left;
  width: 25%;
  padding: 10px;
}

main {
  border: 3px solid gray;
  padding: 10px;
  margin-left: 25%;
}
<aside>
  <h2>The standard Lorem Ipsum passage</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
</aside>
<main>
  <h2>What is Lorem Ipsum?</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
</main>

于 2021-09-29T18:50:41.490 回答
1

获得类似结果的另一种方法是完全放弃float并使用布局网格。在下面的示例中，我定义了一个 2xN 网格并将其设置aside为使用左列，所有行，同时main位于右列的第一行，左列定义为 25%。

行数现在是 3，只是因为我定义aside为占用 3 行。有auto行，所以需要多少就行。

body {
  display: grid;
  grid-template-columns: 25% auto;
  grid-auto-rows: auto;
}

aside {
  grid-column: 1/1;
  grid-row: 1/3;
  padding: 10px;
}

main {
  grid-column: 2/2;
  grid-row: 1/1;
  border: 3px solid gray;
  padding: 10px;
}
<aside>
  <h2>The standard Lorem Ipsum passage</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
</aside>
<main>
  <h2>What is Lorem Ipsum?</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
</main>

于 2021-09-29T19:24:51.727 回答