时间戳

首页 > 解决方案 > 两个侧边栏问题

html - 两个侧边栏问题

问题描述

我的网站上的侧边栏有问题。我有两个侧边栏，都是 250 像素，一个在左侧，第二个在右侧，并且在 div 之间有内容。那个左侧边栏没问题，但是第二个不想改变右侧的位置，而是在第一个位置的左侧。

.info {
  float: right;
  position: fixed;
  z-index: 1000;
  height: 100%;
  width: 250px;
  padding-right: 0;
  padding-top: 50px;
  box-sizing: border-box;
}

.sidebar-menu {
  position: fixed;
  z-index: 1000;
  height: 100%;
  width: 250px;
  display: block;
  padding-left: 0;
  padding-top: 50px;
  box-sizing: border-box;
}

.content-main {
  height: 100%;
  padding-top: 56px;
  width: 100%;
}
<div class="fluid-container">
  <ul class="sidebar-menu">
    <div class="photo">
    </div>
    <div class="name">
      <h2 class="getname">Tommy Hilfiger</h2>
    </div>
    <div class="active">
      <p class="menu">Activity</p>
    </div>
    <div class="followers">
      <p class="menu">Followers</p>
    </div>
    <div class="friends">
      <p class="menu">Friends</p>
    </div>
    <div class="photos">
      <p class="menu">Photos</p>
    </div>
    <div class="edit">
      <p class="menu">Edit</p>
    </div>
  </ul>
  <ul class="info">
    <div class="aqt">
    </div>
  </ul>
  <div class="content-main">
  </div>
</div>

标签： htmlcss

解决方案

首先，不要使用<ul>with <div>，你应该使用<ul><li>...</li></ul>否则更改<ul>为<div> (<ul> is unordered list, <li> is list item).

其次，您构建 html 的方式不是拆分<div>元素（分区），您实际上是在构建一个包含两个列表和一个分区的块。

如果你想让[SideBar][Content][secondBar]使用这个：

<div class="wrapper">
  <div class="leftbar">
    anything
  </div>
  <div class="content">

  </div>
  <div class="rightbar">

  </div>
</div>

使用以下 css 作为基础，样式如下：

div.wrapper{
  display: grid;
  grid-template-areas: "leftbar content rightbar";
  grid-template-rows: 1fr;
}
div.leftbar{
  grid-area: leftbar;
}
div.content{
  grid-area: content;
}
div.rightbar{
  grid-area: rightbar;
}

推荐阅读