Как поместить div одного и того же класса друг под другом?

Question

что я делаю, помещая класс auto_box друг под другом.не ставить рядом?

вот так: http://i.stack.imgur.com/g9fEZ.gif

html:

<div class="auto_box"></div>
<div class="auto_box"></div>
<div class="auto_box"></div>

css:

.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
}

Answer 1

Вы перемещаете свои ящики вправо, чтобы они появлялись рядом. удалите float:right, чтобы они снова стали элементами уровня блока:

.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
}

если вы хотите, чтобы они были выровнены по правому краю, используйте margin-left:auto, чтобы они прилипали к правой стороне экрана

Answer 2

Для эффекта, который вы пытаетесь достичь, я бы использовал содержащий div, чтобы плавать элементы вправо, а затем просто отображал элементы как элементы блока внутри этого div

Пример: http://jsfiddle.net/DCzwu/

HTML

<div class="right">
     <div class="auto_box"></div>
     <div class="auto_box"></div>
     <div class="auto_box"></div>
</div>

1009 * CSS * .right { float:right; } .auto_box { background: #ffffec; width: 173px; direction: rtl; font:16px Tahoma, Arial, Helvetica, Sans-serif; color: #9d9d9d; text-align: right; margin: 8px 5px 0; padding-left: 5px; padding-right: 5px; border-radius: 3px; border: 1px solid #cdcdcd; height:30px; display:block; }

Answer 3

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

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">About</a></li>
</ul>

ul{
  list-style:none;
  line-height:40px;
}
ul li{
  float:left;
  display:inline-block;
  width:150px;
  padding:5px 20px; /* or something based upon need */
}
ul li a{
  text-decoration:none;
  color:/*another color*/;
  background:/*another color*/
  display:block;
}
ul li a:hover{
  color:/* another color */
  background:/* another color */
}

или вы можете поместить свои div в другой div, а затем настроить их вместе, это проще, чем настроить стиль для нескольких различных div вместе,

Answer 4

Ваш CSS должен работать так, как вы хотите, чтобы это было так:

.auto_box {
    background: #ffffec;
    width: 173px;
    direction: rtl;
    font:16px Tahoma, Arial, Helvetica, Sans-serif;
    color: #9d9d9d;
    text-align: right;
    margin: 8px 5px 0;
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    clear: both;
    display: block;
    border-radius: 3px;
    border: 1px solid #cdcdcd;
}

Answer 5

Добавить clear: both к .auto_box css

Вы можете оставить float: right для целей позиционирования, это не повлияет

Answer 6

Попробуйте и удалите float: right; из вашего CSS.

Answer 7

Это float:right в вашем CSS, который говорит браузеру собрать столько блоков на одной строке, сколько уместится. Если вы удалите это, коробки будут накладываться друг на друга.

Если вы хотите, чтобы они были выровнены по правому краю и располагались друг над другом, вам, вероятно, придется показать нам остальную часть вашего контекста HTML / CSS, чтобы мы могли посоветовать это.