CODEWITHSUNDEEP
htmlangularangular8
Harsha Mullangi
Harsha Mullangi

Reputation: 564

How to align sub div inside a div horizontally aligned

How to show all the elements inside a div horizontally with max-width?

<div style="width:350px">
    <div>a</div>
    <div>b</div>
    <div *ngIf="showC()">c</div>
</div>

If suppose c element is not visible then that space should not show in the div box.

I tried using max-width but that didn't help. If c div is not visible then the div should show only 2 elements and no extra spaces as c is not visible

Upvotes: 0

Views: 57

Answers (1)

Sameer
Sameer

Reputation: 5188

You can add display: flex for parent to inline all its child element and add width:100% to all children (See example below)

isShown = false;
function toggleDiv() {
isShown = !isShown
if (isShown) {
 document.querySelector('#showHide').style.display = 'none';
} else {
document.querySelector('#showHide').style.display = 'unset';
}
}
.container {
  display: flex;
}

.container > div {
width: 100%;
  min-height: 100px;
  }
    .container > div:nth-child(1){
      background: lightgreen;
    }
    .container > div:nth-child(2){
      background: yellow;
    }
    .container > div:nth-child(3){
      background: orange;
    }
<div class="container">
      <div></div>
      <div id="showHide"></div>
      <div></div>
    </div>
    
    <button onclick="toggleDiv()">Toggle Div</button>

When you toggle div (Show and hide), The other children will take available width

Upvotes: 2

Related Questions