Сидите div рядом друг с другом, которые генерируют свою ширину, чтобы заполнить родительский div

0

У меня есть родительский div, размер которого равен 960px, и у меня есть 5 div внутри, в котором я хочу равномерно заполнить ширину родителя.

Причина, по которой я не просто делить 960 x 5, состоит в том, что они будут действовать как кнопки, и если я добавлю или уберу один, я хочу, чтобы они приспособились к ширине родительских div.

Я также хочу разницу в 5px между каждым div, чтобы они не касались друг друга.

Это мой HTML, настроенный на данный момент:

<div class="parent">

   <a href="home.html"><div id="home">HOME</div></a>
   <a href="about.html"><div id="about">ABOUT</div></a>
   <a href="getoffer.html"><div id="getoffer">GET OFFER</div></a>
   <a href="testimonials.html"><div id="testimonials">TESTIMONIALS</div></a>
   <a href="contact.html"><div id="contact">CONTACT</div></a>

  </div>

Полный JSFiddle

  • 0
    С одной стороны, глядя на скрипку, вы дублируете стили, основанные на ID элементов, вы должны использовать class вместо тегов идентификаторов. т.е. .button { } и <div id="home" class="button">
  • 0
    @Nunners да, я всегда путаюсь, какой использовать, независимо от того, сколько я читаю в классе и ID, я действительно не понимаю разницу
Показать ещё 6 комментариев
Теги:

2 ответа

1
Лучший ответ

если вы хотите, вы можете использовать этот код JQuery:

jsFiddle здесь

var count = $(".parent a").length;
$(".parent div").width(function(){
    return ($(".parent").width()/count)-5;
}).css("margin-right","5px");

вы можете подсчитать дочерние элементы родительского элемента с count = $(".parent a").length; , ресурс

Поделиться
  • 0
    Не работает, потому что, если я добавлю еще один div в родительский, он падает под остальными. Я хочу, чтобы все div укорачивались для размещения нового div
  • 0
    @Adsy: ответ обновлен
Показать ещё 2 комментария
0

Пытаться

width: 18%

Вы можете отрегулировать ширину соответственно при добавлении или удалении.

Наконец, в вашем CSS у вас много повторений, которые можно очистить, используя class='button'.

http://jsfiddle.net/WeQwc/1/

Поделиться
  • 0
    это не заставляет div заполнять до края родительского div. Существует большой разрыв после крайне правого деления

Ещё вопросы

Сообщество Overcoder
Наверх
Меню