Автоматическое изменение размера дочерних элементов div, чтобы они одинаково разделяли ширину родительского элемента. - PullRequest
Новая
       1

Автоматическое изменение размера дочерних элементов div, чтобы они одинаково разделяли ширину родительского элемента.

1 голос
/ 27 февраля 2012

Допустим, у меня есть родительский div с фиксированной шириной 320px, и я хочу иметь возможность (или я хочу, чтобы мои пользователи могли) добавлять любое количество дочерних div'ов к родителю, и чтобы все они автоматически настраивались наподелиться шириной родителя.

Я не хочу, чтобы ширина родительского элемента изменялась, и при этом я не хочу делать это с каким-либо переполнением прокрутки - мне просто нужно, чтобы элементы div внутри одинаково соответствовали ширине родительского элемента.

Например,

Если есть только один дочерний элемент, то ширина равна 100%, если есть два, то их ширина составляет 50% каждый и т. Д.

Какя бы сделал это?

Я подошел к этому множеству разных способов с помощью css, но, похоже, не могу понять это.Я предполагаю, что это должно быть сделано с каким-то javascript, но я не знаю достаточно, чтобы осуществить его.

Но, если это можно сделать только с помощью css, это было бы здорово.

Заранее спасибо.

(Не знаю, нужно ли вам знатьэто, но у дочерних элементов div не будет текста. Они просто пустые с цветом фона и фиксированной высотой)

Пример кода:

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

Ответы [ 3 ]

1 голос
/ 27 февраля 2012

Используйте display: table (и table-layout: fixed с фиксированной шириной для контейнера, если вам нужны столбцы равной ширины) для контейнера и display: table-cell для дочерних элементов.

0 голосов
/ 27 февраля 2012

Некоторые браузеры также требуют, чтобы правило font-size:0px показывало DIV, высота которого ниже 1em, в противном случае их высота будет 1em.

EDIT

Пришло больше информации, пока я былпишу мой ответ.Если эта компоновка таблицы работает, ответ на последний комментарий выше.Я удалил часть своего ответа, учитывая расположение, потому что я также неправильно понял ваш вопрос.

0 голосов
/ 27 февраля 2012

Надеюсь, это поможет! 

<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>
...