css - Set the width of children to fill the parent -
children/parent issue :
i want children of div
fill width.
now using code this:
.parent { width: 100%; display: inline-block; height: 120px; background: #000; padding: 10px; box-sizing: border-box; } .child { display: inline-block; margin-left: 1%; width: 31.4%; height: 100px; background: #ddd; }
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
and it's working 3 boxes
, want - if box count one
or two
want them fill parent width. want achieve using css.
you can achieve using flexbox properties.
here demo:
.parent { display: flex; height: 120px; background: #000; padding: 10px; box-sizing: border-box; } .child { height: 100px; background: #ddd; flex: 1; margin: 0 10px; }
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> </div>
Comments
Post a Comment