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

Question

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

我做了一个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

我已经修改了HTML的CSS和位以实现您的目标。 基本上，您希望我的侧边栏与图像和文本正确对齐。 为此，请将所有两个元素都封装在父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>