Question

我正在练习定位并且无法弄清楚为什么我的边距导致我的部分下降，而不是保持与旁边的内联。我已经阅读过关于溢出函数以及vertical-align：top，但两者似乎都不起作用。给我提示或正确的代码。此外，旁边和部分之间没有空间。

＆＃13;

header,
aside,
section,
footer {
  background-color: skyblue;
  border-radius: 6px;
  height: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 2px 1px 2px 1px;
}
aside {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
}
section {
  width: 70%;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
}

＆＃13;

<header>(header)</header>

<aside>(aside)</aside>
<section>(section)</section>

<footer>(footer)</footer>

＆＃13;

Answer 1

因为这不是边框的工作方式。边框就是这样 - 在总宽度中包含边框。由于您在旁边和部分做了30％+ 70％，因此没有空间可以获得保证金。但这很容易解决：删除边距，然后添加border: 2px solid transparent;，其效果与边距完全相同。您当然可以为它们制作任何颜色，如果您想在不同的侧面使用不同的宽度，可以更改边框的大小。

Answer 2

问题在于：

section, aside {
  margin: 2px 1px 2px 1px;
}
aside {
  width: 30%;
}
section {
  width: 70%;
}

70% + 30% + 1px + 1px（aside上的页边距）+ 1px + 1px（页边距）在该部分）

这加起来超过100%。（4px更多。）意思是这些东西没有足够的空间坐在同一条线上。

删除边距，你应该好好去。您可以使用填充或透明边框来创建元素之间所需的空间。（尝试在第一组规则中将“margin”更改为“padding”，看看是否能得到你想要的东西。）

Answer 3

我尝试了另一种方法，以另一种方式解决您的问题，但我不知道您是否可以在项目中使用它。

＆＃13;

  header,
  aside,
  section,
  footer {
    background-color: skyblue;
    border-radius: 6px;
    height: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  
  aside {
    width: 29%;
	float: left;
	margin-right: 1%;
  }
  
  section {
    width: 70%;
	float: right;
  }

＆＃13;

<aside></aside>
<section></section>

＆＃13;

我希望能以某种方式提供帮助。

Answer 4

如上所述，您的屏幕宽度比屏幕宽度宽4个像素，并且您可以将旁边标记和部分标记用于减少30％到29.4％的宽度百分比。

aside {
  width: 29.4%;
  display: inline-block;
  vertical-align: top;
  overflow: auto;
}

或

section {

width: 69.4%;

display: inline-block;
vertical-align: top;
overflow: auto;
}

或更改边距以适应。

header,
aside,
section,
footer {
  background-color: skyblue;
  border-radius: 6px;
  height: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;

  margin: 2px -3px 2px 1px;

}

CSS布局，内联块有问题

4 个答案: