Question

因此，我试图将第二个div（即侧边栏）移到第一个div的右侧，但它位于底部。

<div id="content">

     <p class="parleft">Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#" target="_blank">Corrupti fugit laborum consequatur, consectetur magnam nam numquam </a> <b>vitae est debitis sapiente dolorum reprehenderit mollitia aut</b> tempora incidunt, assumenda quam, exercitationem neque.</p>

     <p class="parleft">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti fugit laborum consequatur, consectetur magnam nam numquam vitae est debitis sapiente dolorum reprehenderit mollitia aut tempora incidunt, assumenda quam, exercitationem neque.</p>

     <p id="par3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti fugit laborum consequatur, consectetu.</p>

     <img id="contentimg" src="images/beach-california-dawn-1532771.jpg" alt="California beach" width="275px">

  </div>  <!-- end of content -->

  <div id="sidebar">
        <ul>
            <li><a href="https://www.youtube.com/" target="_blank">Youtube</a></li>
            <li><a href="https://www.reddit.com/" target="_blank">Reddit</a></li>
            <li><a href="https://www.udacity.com/" target="_blank">Udacity</a></li>
        </ul>
        <img id="sidebarimg" src="images/beach-california-dawn-1532771.jpg" alt="California beach" width="100px">

  </div>

这是CSS，我在内容和侧边栏中添加了内联代码块，它确实移到了右边，但它仍然位于底部。

#content {
width: 696px;
background-color: rgb(221, 86, 86);
display: inline-block;
}

#sidebar{
width: 196px;
background-color: rgb(93, 93, 238);
text-align: left;
display: inline-block;

}

Answer 1

将第一个div浮动到左侧

#content {
float: left;
width: 696px;
background-color: rgb(221, 86, 86);
display: inline-block;
}

您可能还需要调整宽度，以便第二个div可以包含浮动后的剩余空间

第二格向右移动，但停留在底部而不是顶部

1 个答案: