Question

我的问题很简单，我有三个div，它们在视觉上是水平的，但我想将它们保持为相同的方面，但是垂直。我是初学者，我研究并试图自己做，但我做不到。请遵循以下代码：

.note-icon-bar {
    width: 20px;
    margin: 1px auto;
    border-top: 1px solid #a9a9a9;
}

<div class="note-statusbar">  
  <div class="note-resizebar">    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>  
  </div>
</div>

我想垂直留下这三个小条形图来制作一个调整大小条。

Answer 1

您可以简化代码并使用一个div（2个边框+ 1个线性渐变），然后调整所需的值：

＆＃13;

.note-icon-bar-v {
  box-sizing:border-box;
  height: 20px;
  width: 7px;
  margin: 1px auto;
  border-right: 1px solid #a9a9a9;
  border-left: 1px solid #a9a9a9;
  background: linear-gradient(#a9a9a9, #a9a9a9) 2px 0/1px 100% no-repeat;
}
.note-icon-bar-h {
  box-sizing:border-box;
  width: 20px;
  height: 7px;
  margin: 10px auto;
  border-top: 1px solid #a9a9a9;
  border-bottom: 1px solid #a9a9a9;
  background: linear-gradient(#a9a9a9, #a9a9a9) 0 2px/100% 1px  no-repeat;
}

＆＃13;

<div class="note-icon-bar-v"></div>
<div class="note-icon-bar-h"></div>

＆＃13;

Answer 2

这就是你想要的？主要是使用 float

＆＃13;

.note-resizebar { 
  position: relative; 
  clear: both;
}
.note-resizebar .note-icon-bar {
    width: 20px;
    margin: 1px 2px;
    border-top: 1px solid #a9a9a9;
    height: 30px;
    background: #999999;
    
    display: inline-block;
    float: left;
}

＆＃13;

<div class="note-statusbar">  
  <div class="note-resizebar">    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>  
  </div>
</div>

＆＃13;

Answer 3

您可以应用display inline-block。

.note-resizebar{
 display:block;
}
.note-icon-bar {
    width: 20px;
    margin: 1px auto;
    border: 1px solid #red;
   display: inline-block;
}

<div class="note-statusbar">  
  <div class="note-resizebar">    
    <div class="note-icon-bar">1</div>    
    <div class="note-icon-bar">2</div>    
    <div class="note-icon-bar">3</div>  
  </div>
</div>

Answer 4

以下是解决方案，您需要在flex上设置父级并调整子级：

.note-resizebar {
    display: flex;
    justify-content: center;
}
.note-icon-bar {
    height: 20px;
    width: 0px;
    margin-right: 2px;
    border-right: 1px solid #a9a9a9;
}

<div class="note-statusbar">  
  <div class="note-resizebar">    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>    
    <div class="note-icon-bar"></div>  
  </div>
</div>

我需要帮助来制作一个垂直调整大小的栏

4 个答案: