Question 45279 in Html Question posted in
Some basic documentation can be found here.

Make div display as horizontal – Html

How can make this display as horizontal current is vertical, something that left to right not top to bottom.

I tried display:flex but only the extra-text class get display:flex no the outside div.
enter image description here

.main-text:hover + .extra-text{
  display:block;
}
.extra-text{
   background-color: #FFFFFF;
    margin-top: 10px;
    width: 70%;
    border: 2px solid #000000;
    padding: 12px;
    font-size: 10px;
    display: none;
}
<div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
 <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
Tags:

2

Answers


  1. 0

    There are multiple ways of going about this but the easiest with your current example would be to wrap your existing code with a div with width = 100% and display: flex.

    .main-text:hover + .extra-text{
  display:block;
}
.extra-text{
   background-color: #FFFFFF;
    margin-top: 10px;
    width: 70%;
    border: 2px solid #000000;
    padding: 12px;
    font-size: 10px;
    display: none;
}
    <div style="width: 100%; display: flex;">
<div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
 <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
          <div  style="padding:12px;width:15%; border:2px solid purple; border-radius:8px;">
            <div class="main-text">Abcd,</div>
            <div class="extra-text"> test 1 test 2 test 3</div>
          </div>
</div>
    Login or Signup to reply.
  2. 0

    display: flex is used on parent node, controll his children’s display, with flex-direction: column make children show in cloumn.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search