时间戳

首页 > 解决方案 > 如何将一个 div 固定到另一个 div 的右侧？

html - 如何将一个 div 固定到另一个 div 的右侧？

问题描述

我有一个垂直 div，左侧有一条细白线。我希望灰色 div 从该行开始。

我怎么能做到这一点？

在此处输入图像描述它有点难以看到，但在左侧有一条细白线。

目前，我的css文件中有：

.bottomPlayerDiv {
  background-color: grey;
  width: 100%;
  height: 150px;
  position: fixed;
  bottom: 0px;
  display: inline-block;
  float: left;
}



 .navDiv {
  position: fixed;
  top: 0px;
  bottom: 0px;
  border-right: 1px solid rgba(41, 41, 41, 1);
  width: 220px;

  display: inline-block;
  float: left;
}

.content {
  margin-left: 220px;
}

HTML：

      <body>

    <div class="navDiv">

      <div class="logo">
        <img id="logoImage" src="images/logo.png">
      </div>

      <div class="navBarItems">
         <button class="profileItem">My Profile</button>
         <button class="exploreItem">Explore</button>
         <button class="uploadItem">Upload</button>
       </div>

  </div>

  <div class="bottomPlayerDiv">

    <div class="soundscapeImgDiv">
      <!-- <img id="soundscapeImg" src="images/testImg.png">
      <img id="pause/playIcon" src="images/pause.png"> -->
    </div>

  </div>
  ...

标签： htmlcss

解决方案

我发现以下代码片段很有用。您正在添加margin-right显示为一条线的内容。

.bottomPlayerDiv { 
  background-color: grey; 
  width: 100%; 
  height: 150px; 
  position: fixed; 
  bottom: 0px; 
  display: inline-block; 
  float: left; 
} 

.navDiv { 
  position: fixed; 
  top: 0px; 
  bottom: 0px;
  width: 220px; 
  display: inline-block; 
  float: left; 
} 
 
 .content { margin-left: 220px; }
<div class="navDiv"></div>
<div class="bottomPlayerDiv"></div>

推荐阅读