[semyon]

Собственно вопрос в названии темы, но немного подробнее и наглядно.

Есть родительский див - контейнер с блоками. Необходимо все дочерние дивы распределить равномерно по ширине. Родитесь фиксированной ширины. Можно банально высчитать и сделать фикс ширину и отступы для дочерних блоков, но количество блоков может быть различным 3-4-5.

Если сказать грубо, то нужно сделать с блоками то, что делает с текстом justify.

[Tiefe]

C помощью justify как раз и можно это сделать, для блоков задается display:inline-block;
В родительском блоке text-align: justify, также нужно добавить в конец элемент с width: 100% и display:inline-block.
Подробнее в поиске "display inline justify"

[DarkAngel-163]

semyon,

Код HTML:

<script type="text/javascript">
$(document).ready(function(){
i = $(".parent div").length();
w = 100/i;
$(".parent div").css({"width":w+"%"});
})
</script>

в целом так... с помощью голого css не получится сделать

[ximet]

Делается это примерно так... Не долгий поиск и нашел практически подобный вопрос на хабре. Немного покопавшись в коде, вот результат:

code

Код HTML:

<style type="text/css">
	
	.menu {
    text-align: justify;
}

.menu-item_outerWrap {
    display: inline;
}

.menu-item {
    background-color: Grey;
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    text-align: left;
}

* html .menu-item {
    display: inline;
    zoom: 1;
}

*+html .menu-item {
    display: inline;
    zoom: 1;
}

.menu-item_innerWrap {
    display: block;
}

.menu-item_sizer {
    width: 100%;
}

.menu-item-icon {
    background-color: Red;
    height: 5px;
    position: absolute;
    right: 0;
}
.content{
	width: 400px;
	height: 300px;
}
</style> <ul class="menu"> <li class="menu-item_outerWrap"> <div class="menu-item"> <div class="menu-item_innerWrap content"> <span class="menu-item-icon">&nbsp;</span> <a href="/news">News</a></div></div></li> <li class="menu-item_outerWrap"> <div class="menu-item"> <div class="menu-item_innerWrap content"> <span class="menu-item-icon">&nbsp;</span> <a href="/swen">Inli</a></div></div></li> <li class="menu-item_outerWrap"> <div class="menu-item"> <div class="menu-item_innerWrap content"> <span class="menu-item-icon">&nbsp;</span> <a href="/profit">Information</a></div></div></li> <li class="menu-item_outerWrap menu-item_sizer">&nbsp;</li> </ul>

[свернуть]

p.s. сам бы также реализовывал, просто не было времени чтобы самому прописать, так что извини.
зы. думаю разберешься. Чуть что знаешь куда писать. Кроссбраузерно!

[semyon]

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


DarkAngel-163, js не хочу использовать, но все равно спасибо за отклик.


ximet, да, спасибо, внедрю, будут вопросы - напишу :)

Вопрос исчерпал себя. Всем спасибо.