Question

我正在尝试将两个div相邻放置，但是应该位于右侧的div出现在左侧的div下方，或者它们彼此相邻，但是它们不再存在在左边缘附近，这应该是左边缘。

这是我的HTML。

.maincontent {
    background-color: white;
    opacity: 0.8;
    height: 400px;
    width: 400px;
    font-family: 'Arvo';
    border: 1px solid black;
    font-size: 20px;
    margin-top: 0;
    display: inline-block;
    float: left;
    position: relative;
}

.sidebar {
    background-color: #242424;
    opacity: 0.8;
    margin-top: 10px;
    width: 50px;
    padding-left: 10px;
    padding-right: 50px;
    height: 210px;
    border-radius: 25px;
    padding-top: 10px;
    left: 10px;
    position: sticky;
    top: 0;
}

.linkinsidebar {
    text-decoration: none;
    color: white;
    font-family: 'Arvo';
    font-size: 20px;
}

<div class="sidebar">
  <h3 style="font-family:'Arvo';">Jump</h3>

  <a class="linkinsidebar" href="#info">Info</a>
  <a class="linkinsidebar" href="#quiz">Quiz</a>
  <a class="linkinsidebar" href="#gallery">Gallery</a>
  <a class="linkinsidebar" href="#top">Top</a>
</div>

<div class="maincontent">

  <p class="pmaincontent">
    <a id="info">Placeholder text</a>
  </p>

</div>

Here is what the code looks like.

Answer 1

在CSS中，您需要在侧边栏和maincontent类中添加向左浮动和向右浮动。另外，HTML代码段在两个div的中间包含一个body标签。是错的。

.maincontent {
    background-color: white;
    opacity: 0.8;
    height: 400px;
    width: 400px;
    font-family: 'Arvo';
    border: 1px solid black;
    font-size: 20px;
    margin-top: 0;
    display: inline-block;
    float: left;
    position: relative;
}

.sidebar {
    background-color: #242424;
    opacity: 0.8;
    margin-top: 10px;
    width: 50px;
    padding-left: 10px;
    padding-right: 50px;
    height: 210px;
    border-radius: 25px;
    padding-top: 10px;
    left: 10px;
    position: sticky;
    float:left;
    top: 0;
}

.linkinsidebar {
    text-decoration: none;
    color: white;
    font-family: 'Arvo';
    font-size: 20px;
}

<div class="sidebar">
   <h3 style="font-family:'Arvo';">Jump</h3>
   <a class="linkinsidebar" href="#info">Info</a>
   <a class="linkinsidebar" href="#quiz">Quiz</a>
   <a class="linkinsidebar" href="#gallery">Gallery</a>
   <a class="linkinsidebar" href="#top">Top</a>
</div>
<div class="maincontent">
   <p class="pmaincontent">
      <a id="info"></a>
      Placeholder text
   </p>
</div>

如何将两个元素彼此相邻？

1 个答案: