向右浮动

Question

我正在设计一个使用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之间没有标签。

请注意，我已经看到了其他解决方案，但是我想要一个有意义的干净解决方案。

Answer 1

我想这就是您想要实现的目标。 现在， article和aside左右浮动。 这实际上是kukkuz在评论中的解决方案。 我不知道为什么它不适合您。

使用clearfix而不是带有clear: both的其他元素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> 

Answer 2

希望我能理解您的问题。 您可以通过多种方式实现这一目标，最明显的一种方式是删除内联规则，并搁置和浮动文章。 浮动：左； 分别是，但是float旨在使文本在图像周围浮动，而不是精确地定位div（尽管它可以工作）。 因此，我将尝试定位：绝对； 不论是文章还是文章； 并使用左，右，上，下定位元素。

 article { position: absolute; top: 69px; width: 60%; } aside { background-image: url("money-stack.png"); background-position: 200px 200px; background-size: cover; position: absolute; right: 8px; top: 69px; width: 30%; } body { border: 5px solid #375e97; color: black; font-family: "Roboto",sans-serif; min-height: 318px; } 

之后，您可以为容器设置最小尺寸，也可以添加clear：both; 样式元素到底部，以使容器拉伸到正确的尺寸。

我认为您应该更改的另一件事是，您正在使用body作为容器并对其应用样式。 我认为创建一个实际的容器div并对其应用样式是一种很好的做法。