html - Make elements automatically fit width of parent wo tablesjavascript - Stack Overflow

admin管理员组

文章数量:1398831

Is it possible to create a div containing multiple boxes that automatically fit to the size of the parent (distributed evenly) without the use of a table or Javascript? I realize that it is possible with table-layout:fixed; but I have tried to animate that and it did not seem to work very well. The following picture is an example of what I mean:

I am trying to increase the width of one box inside the div which will then case the rest of the boxes to automatically size so all of the boxes fit into the div evenly. I need it to be animated, not just instant in which case I would just use a table. I have also experimented with it using Javascript, animating it with a -webkit-transition but this did not turn out to animate very well. Instead of expanding/decreasing in size, the box seemed to start out it's width at 0px then stretch to the size given to it. (this was using a table with table-layout:fixed. Is there a pure CSS/HTML way to do this, or does it require the use of Javascript and/or a table?

Is it possible to create a div containing multiple boxes that automatically fit to the size of the parent (distributed evenly) without the use of a table or Javascript? I realize that it is possible with table-layout:fixed; but I have tried to animate that and it did not seem to work very well. The following picture is an example of what I mean:

I am trying to increase the width of one box inside the div which will then case the rest of the boxes to automatically size so all of the boxes fit into the div evenly. I need it to be animated, not just instant in which case I would just use a table. I have also experimented with it using Javascript, animating it with a -webkit-transition but this did not turn out to animate very well. Instead of expanding/decreasing in size, the box seemed to start out it's width at 0px then stretch to the size given to it. (this was using a table with table-layout:fixed. Is there a pure CSS/HTML way to do this, or does it require the use of Javascript and/or a table?

• javascript
• html
• css
• animation
• css-tables

Share Improve this question Follow edited Oct 12, 2017 at 22:53 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 28, 2013 at 16:19 daviga404daviga404 53811 gold badge55 silver badges2121 bronze badges 1

• 1 +1 for the very illustrative question, + its actually a good question. – Andreas Louv Commented Feb 28, 2013 at 16:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Using a fixed number of children it’s possible without tables (although you need table displays), here is the CSS I used:

.parent{width:400px;height:100px;display:table}

.parent div{display:table-cell;border:1px solid #000;
    -webkit-transition:width 1s;width:20%}

.parent:hover div{width:10%}
.parent div:hover{width:60%}

You need to manually calculate the percents for the best results in the animation. Demo:

http://jsbin./ubucod/1

If you want the boxes to animate on a click/touch then you'll need Javascript.

If you want the boxes to animate only on rollover then you can apply css to the parent element to set all boxes to the same percent by default and change them on rollover.

This solution only works for a fixed number of boxes though.

    #Container .box{
        width: 20%;
        transition: width 0.2s;            
    }
    #Container:hover .box{
        width: 10%;
    }
    .box:hover{
        width: 60%;
    }

I haven't tested it but it should work.

HTML:

<div class="pushercolumn"></div>
<div class="pushedcolumn">
    <div class="unit"></div>
    <div class="unit"></div>
    <div class="unit"></div>
    <div class="unit"></div>
</div>

CSS:

.pushercolumn {
    float: left; 
    width: 30%; /*or whichever you want*/
}

.pushedcolumn {
    overflow: hidden; /* guarantees the .pushedcolumn is pushed horizontally by the floats */
    font-size: 0; /* removes white-space. choose your preferred method*/
}

.unit {
    display: inline-block;
    width: 25%; /* assuming there are 4 boxes in the right column. this is the only variable you have to update based on the circumstances */
}

http://jsfiddle/joplomacedo/xYAdR/

本文标签： htmlMake elements automatically fit width of parent wo tablesjavascriptStack Overflow