如何让我的侧边栏与页面右侧的文本对齐？

Question

我正在尝试使用我自己的代码复制此代码笔。但是，我不知道如何让我的侧边栏对齐到右侧。我不明白。我了解内联块与内联块之间的区别块，但为什么我不能让我的侧边栏对齐到右边。我希望侧边栏从页面右侧文本上方一点点开始。

我制作了一个 imageText div，并将图像和段落文本对齐到页面的左侧，因此我认为这将有助于将侧栏对齐到页面的右侧。我究竟做错了什么？

我正在为侧边栏使用 div，据我所知，它会将侧边栏放在一个新行上，但即使我删除它，它也不会与图像和文本对齐。如果我使用内联块，它只会在文本下排列。如果我将位置设置为绝对位置，它仍然不允许我将侧栏对齐到靠近文本的页面右侧。我试图很好地掌握 HTML/CSS 的基础知识。这是关于 Udemy 的作业。请看我的代码

h2 {
  display: inline-block;
}

.nav:hover {
  background-color: red;
  font-size: 150%;
  color: white;
}

.myWebsite {
  border-bottom: 2px solid red;
  padding-bottom: 10px;
}

.nav {
  border: 2px solid red;
  padding: 10px;
  margin-left: 130px;
}

.imageText {
  padding-top: 100px;
  margin-right: 5%;
}

img {
  /*   width: 350px; */
  width: 350px;
  height: 150px;
  float: left;
  padding: 20px;
}

p {
  line-height: 1.5em;
  font-size: 18px;
}

.sidebar {
  border: 1px solid yellow;
  background-color: gray;
  height: 280px;
  width: 300px;
  display: inline-block
}

/* .footer{
 border: 2px solid yellow;
margin: 20px;
} */

<div class="myWebsite">
  <h2>My Website </h2>
  <a class="nav" href="#home">Home</a>
  <a class="nav" href="#about">About</a>
  <a class="nav" href="#contact">Contact</a>
</div>

<div class="imageText">
  <img src="https://www.surfertoday.com/images/stories/surferbarrel.jpg">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</div>

<div class="sidebar">
  <a href="#">Some Useful Articles</a>
</div>

<!-- <footer class="footer">
  <p>Join our mailing List</p>
 <input type="text" name="email" placeholder="Enter Your Email" />
  <input type="submit" value="Sign Me Up!" />
</footer> -->

</body>

</html>

https://codepen.io/mbowen/pen/epBgaJ

Answer 1

我已经修改了 css 和位 html 以实现您的目标。 基本上，您希望我的侧边栏与您的图像和文本正确对齐。 为此，将所有元素都封装在父 div 中。使 div 及其所有内容成为内联块。然后让所有孩子向左浮动并设置它们的宽度。 在下面的代码中，我将图像和图像文本容器宽度设置为 75%，侧边栏宽度设置为 25%。这使得它们总覆盖了 100% 的全宽。因此，您的侧边栏将始终位于最后，即所有屏幕都右对齐。您可以使用额外的媒体查询来根据不同的屏幕尺寸设置元素的宽度。

请看你也可以使用 CSS FlexBox。使用更少的 CSS 会更容易。 希望能帮助到你。 :)

body, body *{
box-sizing: border-box;

}
h2 {
  display: inline-block;
}

.nav:hover {
  background-color: red;
  font-size: 150%;
  color: white;
}

.myWebsite {
  border-bottom: 2px solid red;
  padding-bottom: 10px;
}

.nav {
  border: 2px solid red;
  padding: 10px;
  margin-left: 130px;
}

.imageText {
  width: 75%;
  line-height: 1.5em;
  font-size: 18px;
  padding: 10px;
}

img {
  width: 25%;
  margin-right: 10px;
}
.sidebar {
  border: 1px solid yellow;
  background-color: gray;
  height: 280px;
  width: 25%;
}

.myContainer{
width: 100%;
display: inline-block;
margin-top: 100px;
}
.myContainer *{
display: inline-block;
float: left;
}

<div class="myWebsite">
  <h2>My Website </h2>
  <a class="nav" href="#home">Home</a>
  <a class="nav" href="#about">About</a>
  <a class="nav" href="#contact">Contact</a>
</div>

<div class="myContainer">
<div class="imageText">

  <img src="https://www.surfertoday.com/images/stories/surferbarrel.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

<div class="sidebar">
  <a href="#">Some Useful Articles</a>
</div>
</div>

Answer 2

用一个元素包裹.imageText和.sidebar（我用过<main），并将其显示设置为flex：

h2 {
  display: inline-block;
}

.nav:hover {
  background-color: red;
  font-size: 150%;
  color: white;
}

.myWebsite {
  border-bottom: 2px solid red;
  padding-bottom: 10px;
}

.nav {
  border: 2px solid red;
  padding: 10px;
  margin-left: 130px;
}

.imageText {
  margin-right: 5%;
}

img {
  /*   width: 350px; */
  width: 350px;
  height: 150px;
  float: left;
  padding: 20px;
}

p {
  line-height: 1.5em;
  font-size: 18px;
}

.sidebar {
  border: 1px solid yellow;
  background-color: gray;
  height: 280px;
  width: 300px;
  display: inline-block
}

main {
  display: flex;
  padding-top: 100px;
}

/* .footer{
 border: 2px solid yellow;
margin: 20px;
} */

<div class="myWebsite">
  <h2>My Website </h2>
  <a class="nav" href="#home">Home</a>
  <a class="nav" href="#about">About</a>
  <a class="nav" href="#contact">Contact</a>
</div>

<main>

  <div class="imageText">
    <img src="https://www.surfertoday.com/images/stories/surferbarrel.jpg">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce
      luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed
      nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
  </div>

  <div class="sidebar">
    <a href="#">Some Useful Articles</a>
  </div>

</main>

<!-- <footer class="footer">
  <p>Join our mailing List</p>
 <input type="text" name="email" placeholder="Enter Your Email" />
  <input type="submit" value="Sign Me Up!" />
</footer> -->

</body>

</html>