向右浮动

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（较小的那个）。

问题

问题是我实际上想 "pin" 正文右侧的 aside，而不是文章。我知道要完成这项工作，我必须删除右侧的边框并将其添加到左侧。

我试过的

尝试调整对齐、文本对齐和您能想到的所有其他对齐方式的各种值。
使 aside 和 article 之间没有标签。

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

Answer 1

我想这就是您想要实现的目标。 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>

Answer 2

希望我理解了您的问题。有很多方法可以实现这一点，最明显的方法是删除内联规则并使 aside 和 article 都浮动：对；和浮动：左；分别，但 float 的目的是使文本浮动在图像周围而不是精确定位 divs （尽管它有效）。因此，我会尝试定位：绝对；旁白和冠词；并使用 left, right, top, bottom 来定位元素。

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 并将样式应用于该容器是一种很好的做法。

向右浮动

Floating to the right

html

css

margin

padding

问题

我试过的