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

Question

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

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

我正在为侧边栏使用一个 div，据我所知，它会将侧边栏放在一个新行上，但即使我将其删除，它也不会与图像和文本对齐。如果我使用内联 block ，它只是将它放在文本下面。如果我将位置设置为绝对位置，它仍然不允许我将边栏排到页面右侧靠近文本的位置。我试图很好地掌握 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

我已经修改了 html 的 css 和 bit 来实现你的目标。 基本上，您希望侧边栏与您的图像和文本右对齐。 为此，将所有元素都封装在父 div 中。使 div 及其所有内容成为内联 block 。然后让所有的 child 向左浮动并设置他们的宽度。 在下面的代码中，我将图像和图像文本容器宽度设置为 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>