我正在使用 HTML 和 CSS 设计一个网站，某处似乎有一个看不见的边距。
目前，我的网站是这样的:
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
display: inline-block;
vertical-align: top;
}
article {
width: 60%;
}
aside {
width: 30%;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>如果您仔细查看屏幕截图中间的article 和aside，您会发现我已经制作了他们的display: inline-block; 并删除了 aside(较小的那个)左边的边框。
问题
问题是我想将 aside 实际上“固定”到正文的右侧，而不是文章的右侧。我知道要完成这项工作，我必须删除右侧的边框并将其添加到左侧。
我尝试过的
尝试使用对齐、文本对齐和您能想到的所有其他对齐方式的各种值。
让
aside和article之间没有标签。
请注意，我已经看到了其他解决方案，但我想要一个有意义的干净解决方案。
最佳答案
我想这就是您想要实现的目标。
article 和 aside 现在左右浮动。
这实际上是评论中 kukkuz 的解决方案。我不知道为什么它不适合你。
使用 clearfix 代替带有 clear: both 的附加元素
如果没有周围的元素，在这种情况下，body 将无法从其内容中获取高度，并且所有内容周围的边框都无法正确显示。
h1, h2 {
font-family: 'Righteous', cursive;
text-align: center;
}
body {
font-family: 'Roboto', sans-serif;
color: black;
border: 5px solid #375E97;
}
body:after {
content: '';
clear: both;
display: table;
}
article, aside {
padding: 1%;
margin: 1.5% 0;
border: 5px solid #375E97;
border-left: 0;
}
article {
width: 60%;
float: left;
}
aside {
width: 30%;
border-left: 5px solid #375E97;
border-right: 0;
float: right;
background-image: url("money-stack.png");
background-size: cover;
background-position: 200px 200px;
}
h1 {
background-color: #375E97;
color: #FFFFFF;
font-size: 6.9vw;
text-transform: uppercase;
padding: 0;
margin: 0 auto 2.1% auto;
line-height: 4.9vw;
height: 5vw;
}
h2 {
color: #375E97;
font-size: 3.5vw;
padding: 0;
margin: 0;
}
p {
padding: 0;
margin: 1% 0 0 0;
font-size: 1vw;
}
.sub-heading {
font-style: italic;
text-align: center;
}
.sub-heading > span {
font-weight: 700;
font-style: normal;
}<!DOCTYPE html>
<html>
<head>
<title>Act 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>
<body>
<header>
<h1>Filler text here</h1>
</header>
<article>
<h2>More more</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</article>
<aside>
<h2>And More</h2>
<p>
<div class="sub-heading">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
<br>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
</p>
</aside>
</body>
</html>关于html - 向右浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39632566/