Geek Answers Handbook

HTML / CSS: Can the percentage width of divs completely fill the parent container (like a table cell)?

I would like to know if it is possible for divs of different percentages to fill their parent container completely, like how the table cells will always fill the width of their row, even when percentages need to be rounded.

Here is the desired effect using the table: http://jsfiddle.net/Tq9mJ/1/ enter image description here

Here's what happens when using a div with the same percentage: http://jsfiddle.net/fDVwB/1/ enter image description here

I would prefer to use divs in my specific application, if possible.

Thank!

: div . , . - , divs .

+2
3

div "3" .

CSS flex-box CSS3. - JSFiddle. , ( IE), , .

: , ,

+1

, , , , CSS, , , , , , CSS. , , , , , .

, .right div: padding-left:.25% margin-right: -.25%. div, .

, !

+1

The biggest problem is ENTER / space between divs, at least one space is rendered. This means that you have 3 items out of 33.33333% + 3 spaces in width. This does not match the parent. you laid the beginning and end of the div next to each other, The do fit.

I played a little with your example, and now it looks like this:

div.container
{
    width: 90%;
    margin: 10px auto;
    height: 100px;
    border: 1px solid #999;
}

div.container>div{
    display:inline-block;
    margin:0;
    padding:0;
    width: 33.333%;
    height: 100%;
}
div.left
{
    background-color: Red;
}

div.center
{
    background-color: Blue;
}

div.right
{
    background-color: Aqua;
}​



<div class="container">
    <div class="left"></div><div class="center"></div><div class="right"></div>
</div>​
0
source

More articles:


All Articles