All geek questions in one place

Automatically resize child divs so that they equally distribute the width of the parent

Let's say I have a parent div with a fixed width of 320 pixels, and I want to be able (or I want my users to be able to) add any number of child divs to the parent element, and they all automatically adjust to divide the width of the parent.

I don’t want to change the width of the parent element and I don’t want to do this with any scroll overflow - I just need the divs inside to match the width of the parent equally.

For instance,

If there is only one child, then the width is 100%, if there are two, then their width is 50%, etc.

How should I do it?

I approached this in many different ways using css, but didn't seem to get it. I assume this needs to be done using some kind of javascript, but I don't know how to do it.

But, if this can be done using only css, that would be great.

Thanks in advance.

(I don’t know if I need to know this, but the child divs have no text. They are just empty with a background color and a fixed height)

Code example:

CSS

.box { margin: 10px; background: white; border-radius: 6px; border: 1px solid darken(white, 12%); -webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); -moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07); float: left; } .line { height: 6px; opacity: 0.4; -moz-opacity: 0.4; filter:alpha(opacity=4); margin-bottom: -1px; float: left; }

HTML

 ... <div class="box"> <div class="line">&nbsp;</div> </div> ... #will be able to add any amount of .lines
+1
source share
3 answers

Use display: table (and table-layout: fixed with a fixed width for the container if you need columns with the same width) for the container and display: table-cell for the children.

+1
source

Hope this helps!

 <html> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script tye="text/javascript"> function resizeChildren( $div ){ var $children = $div.children(".child"); // Change .line to the appropriate class of the children var $count = $children.length; // Determine how may children var $width = $div.width(); // Get width of parent var $cellwidth = Math.floor( $width / $count ); // Calculate appropriate child width $children.width( $cellwidth ); // Apply width } function addChild( $div, $html ){ $( $html ).prependTo ( $div ); // Add a new child resizeChildren ( $div ); // Call the resize function } $(document).ready( function(){ $("#add").click( function(){ // When <a id="add" is clicked... addChild( $(".parent"), '<div class="child">Random...</div>' ); return false; }); }); </script> <style type="text/css"> .parent { width: 500px; border: 1px solid #000; } .child { float: left; } </style> <div class="parent" style="width: 500px;"> <div class="child">Random...</div> <br clear="all" /></div> <a href="#" id="add">Add DIV</a> </body> </html>
0
source

Some browsers also require a font-size:0px rule to show a DIV whose height is below 1em, otherwise their height will be 1em.

EDIT

When I wrote my answer, more information appeared. If this table layout works, the answer to the last comment is above. I deleted part of my answer, considering positioning, because I also did not understand your question.

0
source

Source: https://habr.com/ru/post/1398896/

More articles:


All Articles