эффективный способ выровнять разделы рядом?

#html #css

#HTML #css

Вопрос:

Какой наилучший способ выровнять 3, 4 или даже 5 разделов рядом? с пробелом между каждым из них, разделяющим их.

Я пытался погуглить это, но, похоже, существует так много разных ответов, которые просто кажутся слишком зависимыми от варианта использования (т. Е. Если это для 2 divs или 3 divs и т.д.), Я спрашиваю, какой лучший способ сделать это для любого количества divs?

Спасибо

Ответ №1:

Все ответы, приведенные здесь, превосходны, и они являются эффективным способом. Но я попытался упростить их для вас.

HTML:

 <div id="apnd">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
</div>

CSS:

 #apnd div { 
        height: 100px; 
        width: 100px; 
        border: 1px solid red; 
        margin-left: 5px; 
        float: left; /*Here you can also use display: inline-block instead of float:left*/
        background: orange; 
}

1. ternstyle.us/blog/float-vs-inline-block содержит хороший обзор различных методов. Вы также могли бы рассмотреть возможность использования сетки из среды адаптивного дизайна, такой как Foundation — foundation.zurb.com

Ответ №2:

Другой вариант: http://jsfiddle.net/brandondurham/Tht3N /

 <div id="row">
    <div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div>
</div>

#row {
    white-space: nowrap;
}
#row > div {
    background: lightblue;
    display: inline-block;
    height: 50px;
    width: 50px;
}
#row > div   div {
    margin-left: 10px
}

Ответ №3:

Есть ли что-то подобное:

 div.container { display:table; border-spacing:{your-space}px; }
div.container > div { display:table-cell; }

в вашем наборе «так много разных ответов»?

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

Пока CSS WG не приметhttp://www.terrainformatica.com/w3/flex-layout/flex-layout.htm 🙂

1. Привет, я не совсем понимаю, что вы пытаетесь там сделать, не могли бы вы, пожалуйста, предоставить очень простой пример кода из 3 divs, выровненных рядом друг с другом? Спасибо

Ответ №4:

Попробуйте это:

 div {
float:left
margin-left:20px; //or whatever you want
}

div:first-child {
margin-left:0;
}

Ответ №5:

я использую это: http://plugins .jquery.com/project/equalizeCols