html - Setting multiple divs by width percent to fill parent div next to each other -


If you have a fixed width of the parent with children set as many divs and one percent next to each other Fixed parents with divs width, sometimes the baby divs are not visible on all the same lines, however the amount of percentages of the child divs is 100%.

HTML: 

  & lt; Div id = "parent" & gt; & Lt; Div class = "child" style = "width: 51.5%;" & Gt; 1 & lt; / Div & gt; & Lt; Div class = "hair" style = "width: 0.58333333333333%;" & Gt; 2 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 21.666666666667%;" & Gt; 3 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 0.56944444444444%;" & Gt; 4 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 15%;" & Gt; 5 & ​​lt; / Div & gt; & Lt; Div class = "child" style = "width: 0.23611111111111%;" & Gt; 6 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 6.7361111111111%;" & Gt; 7 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 0.69444444444444%;" & Gt; 8 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 2.3611111111111%;" & Gt; 9 & lt; / Div & gt; & Lt; Div class = "child" style = "width: 0.47222222222222%;" & Gt; 10 & lt; / Div & gt; & Lt; Div class = "hair" style = "width: 0.18055555555556%;" & Gt; 11 & lt; / Div & gt; & Lt; / Div & gt;

CSS: 

  # parent {float: left; Width: 850px; Hidden flurry; } .child {border: 1px solid red; Swim left; -WebKit-box-size: border-box; -MOZ Box-Size: border-box; Box-size: border-box; Background color: blue; White-space: Abrop; Hidden flurry; }

Any thoughts? Remove

property from the child

Because this is increasing the width of children; margin: 0; Padding: 0; Add the child If you add margin padding , then they will increase the size of children by reducing the width if the limit is required that it can allocate additional borders


Comments

Post a Comment