CODEWITHSUNDEEP
htmlcss
Umaiz Khan
Umaiz Khan

Reputation: 1227

HTML CSS how to show div in rows

I have a simple div which has 5 to 6 values. I need to show all in rows, not in one line like 3 in the first and 2 in the second row. It will automatically set the width and adjust:

.block_container6 > div {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 5px;

}

.bloc6{
    font-size:9px;
    font-weight: 500;
}

.bloc61{
    font-size: 9px;

}
<div class="row" >

    <div class="block_container6" >
        <div class="bloc6">Group No:</div>
        <div class="bloc61">2132131}</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Plan:</div>
        <div class="bloc61">1231231</div>
    </div>


    <div class="block_container6" >
        <div class="bloc6">Certificate No:</div>
        <div class="bloc61">21321312</div>
    </div>


    <div class="block_container6">
        <div class="bloc6">Effective Date:</div>
        <div class="bloc61">12321312</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Expiry Date:</div>
        <div class="bloc61">131231</div>
    </div>

</div>

My expected example result is like this:

Groupno: 2132131} Plan: 1231231 and so on

Upvotes: 1

Views: 1632

Answers (5)

Sourav Singh
Sourav Singh

Reputation: 955

Do with few line of code using css flex 

.block_container{
  display:flex;
}
.block_container6{
  display:flex;
  width:100%;
  justify-content:center;
  
}
<div class="row block_container" >

    <div class="block_container6" >
        <div class="bloc6">Group No:</div>
        <div class="bloc61">2132131}</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Plan:</div>
        <div class="bloc61">1231231</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Certificate No:</div>
        <div class="bloc61">21321312</div>
    </div>

</div>

Upvotes: 1

cloned
cloned

Reputation: 6742

Use display: flex to align your divs. btw, if your text is some real data, it would be better to use semantic elements for it, like a definition list (you can style it the same way as divs) 

.row {
display: flex;
}

dd, dt {
margin-left: 10px;
font-size: 12px;
}

.row > div{
display: flex;
}

.block_container6 > div {
    margin-left: 10px;
    margin-top: 5px;
}

.bloc6{
    font-size:9px;
    font-weight: 500;
}

.bloc61{
    font-size: 9px;

}
<div class="row" >

    <div class="block_container6" >
        <div class="bloc6">Group No:</div>
        <div class="bloc61">2132131}</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Plan:</div>
        <div class="bloc61">1231231</div>
    </div>


    <div class="block_container6" >
        <div class="bloc6">Certificate No:</div>
        <div class="bloc61">21321312</div>
    </div>


    <div class="block_container6">
        <div class="bloc6">Effective Date:</div>
        <div class="bloc61">12321312</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Expiry Date:</div>
        <div class="bloc61">131231</div>
    </div>

</div>

<dl class="row">
 <dt> Plan: </dt>
 <dd> 123123123</dd>
 <dt> Certificate No: </dt>
 <dd> 1243453452</dd>
 <dt> Effective Date: </dt>
 <dd> 5739879 </dd>
 <dt> Expiry Date: </dt>
 <dd> 4857892 </dd>
</dl>

Upvotes: 3

Celsiuss
Celsiuss

Reputation: 905

This looks like a perfect job for flexbox, here's an example based on your code:

.row {
  display: flex;
  justify-content: space-between;
}

.block_container6 > div {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 5px;
}

.bloc6{
    font-size:9px;
    font-weight: 500;
}

.bloc61{
    font-size: 9px;

}
<div class="row" >

    <div class="block_container6" >
        <div class="bloc6">Group No:</div>
        <div class="bloc61">2132131}</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Plan:</div>
        <div class="bloc61">1231231</div>
    </div>


    <div class="block_container6" >
        <div class="bloc6">Certificate No:</div>
        <div class="bloc61">21321312</div>
    </div>


    <div class="block_container6">
        <div class="bloc6">Effective Date:</div>
        <div class="bloc61">12321312</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Expiry Date:</div>
        <div class="bloc61">131231</div>
    </div>

</div>

Upvotes: 3

Janis Jansen
Janis Jansen

Reputation: 1025

If I understand you correctly you want to display all the divs in one row, right? If so you would need to set block_container6 to display: inline; or display: inline-block;.

If the with of the elements is higher than the containing element, they will break anyways but this is another topic, I think.

.block_container6 {
    display: inline-block;
}

.block_container6 > div {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 5px;

}

.bloc6{
    font-size:9px;
    font-weight: 500;
}

.bloc61{
    font-size: 9px;

}
<div class="row" >

    <div class="block_container6" >
        <div class="bloc6">Group No:</div>
        <div class="bloc61">2132131}</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Plan:</div>
        <div class="bloc61">1231231</div>
    </div>


    <div class="block_container6" >
        <div class="bloc6">Certificate No:</div>
        <div class="bloc61">21321312</div>
    </div>


    <div class="block_container6">
        <div class="bloc6">Effective Date:</div>
        <div class="bloc61">12321312</div>
    </div>

    <div class="block_container6" >
        <div class="bloc6">Expiry Date:</div>
        <div class="bloc61">131231</div>
    </div>

</div>

Upvotes: 1

Skylar
Skylar

Reputation: 926

Add the following rule set:

.block_container6 {
  display: inline-block;
}


.block_container6 {
  display: inline-block;
}

.block_container6>div {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: 5px;
}

.bloc6 {
  font-size: 9px;
  font-weight: 500;
}

.bloc61 {
  font-size: 9px;
}
<div class="row">

  <div class="block_container6">
    <div class="bloc6">Group No:</div>
    <div class="bloc61">2132131}</div>
  </div>

  <div class="block_container6">
    <div class="bloc6">Plan:</div>
    <div class="bloc61">1231231</div>
  </div>


  <div class="block_container6">
    <div class="bloc6">Certificate No:</div>
    <div class="bloc61">21321312</div>
  </div>


  <div class="block_container6">
    <div class="bloc6">Effective Date:</div>
    <div class="bloc61">12321312</div>
  </div>

  <div class="block_container6">
    <div class="bloc6">Expiry Date:</div>
    <div class="bloc61">131231</div>
  </div>

</div>

Upvotes: 1

Related Questions