6

My question is simple, I have three divs, which are visually horizontal, but I would like to leave them as same aspect, but vertically. I'm a beginner, I researched and tried to do it myself, but I could not. Follow the code:

.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>

I would like to leave these three small bars vertically for me to make a resize bar.

4 Answers 4

7

you can simplify your code and use one div (2 border + 1 linear-gradient) then adjust the needed values:

.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;
}
<div class="note-icon-bar-v"></div>
<div class="note-icon-bar-h"></div>

7
  • Temani tested its solution in Google Chrome, but apparently the linear-gradient did not work. Was there any alternative? Commented Mar 1, 2018 at 19:00
  • 1
    @RafaelOliveira are you sure you copied the exact code ? did you made any changes to it ? as i work mainly with chrome and it works fine Commented Mar 1, 2018 at 19:01
  • @RafaelOliveira also you said it's was exactly what you want which means it's working here ? Commented Mar 1, 2018 at 19:05
  • At first it started to work in chrome. I am using the Brackets editor and when I was running the chrome for it, it was not working the linear gradient. Please see my code if you can. If you find any improvement, tell me. My code is this: This Code! Commented Mar 1, 2018 at 19:45
  • 1
    @RafaelOliveira ok i update the code, maybe you have box-sizing:border-box; defined somewhere .. try with this one Commented Mar 1, 2018 at 20:24
2

That is what you want? Mainly it is using float

.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;
}
<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>

2

You can apply 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>
0

Here is the solution, you need to set the parent on flex and adapt the children :

.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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.