Question

我的网站上的侧边栏存在问题。我有两个都为250px的侧边栏，一个在左侧，第二个在右侧，并且在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>

Answer 1

首先，请勿将<ul>与<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;
}

两个侧边栏问题

1 个答案: