在CSS布局、内联块方面有问题
在CSS布局、内联块方面有问题
提问于 2016-10-27 01:10:19
我正在练习定位，不知道为什么我的边距会导致我的区域下降，而不是停留在一边。我读过关于溢出函数以及垂直对齐的文章: top，但两者似乎都不起作用。给我一些提示或者正确的代码。另外，在旁边和部分之间没有空位。
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;
}<header>(header)</header>
<aside>(aside)</aside>
<section>(section)</section>
<footer>(footer)</footer>
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-10-27 01:20:43
问题是：
section, aside {
margin: 2px 1px 2px 1px;
}
aside {
width: 30%;
}
section {
width: 70%;
}70% + 30% + 1px + 1px (aside上的边距)+ 1px + 1px (节边距)
这比100%加起来还要多。(4px更多)这意味着没有足够的空间让这些东西坐在同一条线上。
去掉空白处，你就可以走了。您可以使用填充边框或透明边框在元素之间创建所需的空格。(尝试将第一套规则中的“页边距”改为“填充”，看看这是否符合您的要求。)
Stack Overflow用户
发布于 2016-10-27 01:15:09
因为边框不是这样运作的。边框框就是这样做的--在总宽度中合并了边框。由于你做的是30% + 70%的一边和部分，没有空间为利润率。不过，这是一个简单的解决方法:删除边距，并添加border: 2px solid transparent;，它的工作方式与边距完全相同。当然，你可以让它们变成你想要的任何颜色，如果你想要不同的边宽，你可以改变边框的大小。
Stack Overflow用户
发布于 2016-10-27 01:27:35
我尝试了另一种方法，以另一种方式解决您的问题，但我不知道您是否可以使用它在您的项目。
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;
}<aside></aside>
<section></section>
我希望在某种程度上有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40274521
复制相关文章
相似问题
腾讯云开发者
