DIV Stacking & Spacing Использование CSS

Question

Как вы увидите (очень быстро), я несколько нового в CSS. В конечном счете, я пытаюсь разработать «временную шкалу», похожую на то, что было в прошлом году, когда каждый пост будет отображаться на временной шкале. Каждое сообщение в конечном счете будет чередоваться между левой и правой сторонами. Например, сообщение 1 - левая сторона, пост 2 - правая сторона, пост 3 - левая сторона и т. Д.

У меня возникли проблемы с расположением моей временной шкалы. Я нашел способ сделать столбики чередующимися сторонами, однако каждая «почта» по существу сложена друг на друга, тогда как я хотел бы задать промежуток между двумя сообщениями как минимум 35 пикселей. Это означает, что вторая позиция (с правой стороны) будет на 35 пикселей ниже нижней части первого сообщения (с левой стороны), а третья позиция будет на 35 пикселей ниже нижней части второго сообщения (справа сторона) ... так далее и т. д.

Любые мысли о том, как я могу это сделать?

<div id="timeline" style="background-color: #fff; float: left; padding: 10px; clear: left; width: 900px; margin-top: 25px;"> 
    <div id="middle" style="width: 900px; height: 133px; background: transparent url('/timeline.png') repeat-y scroll 0px 0px;"> 
    <div id="leftblock" > 
    <img src="/dot1.png"> 
    <div style="float: left; margin-right: 23px;"> 
    <div style="border: 1px solid #ccc; width: 400px; float: left;padding: 5px;">adfasdfsdaf</div> 
    <img style="float: left;" src="/right_arrow.png"> 
    </div> 
    </div> 

    <div id="rightblock"> 
    <img style="float: left;" src="/dot1.png"> 
    <div style="float: left; margin-left: 23px;"> 
    <img style="float: left;" src="h/left_arrow.png"> 
    <div style="border: 1px solid #ccc; width: 400px; float: left; padding: 5px;">adfasdfsdaf</div> 
    </div> 
    </div> 

    <div id="leftblock" > 
    <img src="/dot1.png"> 
    <div style="float: left; margin-right: 23px;"> 
    <div style="border: 1px solid #ccc; width: 400px; float: left;padding: 5px;">adfasdfsdaf</div> 
    <img style="float: left;" src="right_arrow.png"> 
    </div> 
    </div> 

    <div id="rightblock"> 
    <img style="float: left;" src="dot1.png"> 
    <div style="float: left; margin-left: 23px;"> 
    <img style="float: left;" src="/left_arrow.png"> 
    <div style="border: 1px solid #ccc; width: 400px; float: left; padding: 5px;">adfasdfsdaf</div> 
    </div> 
    </div> 

    </div> 
</div> 

Answer 1

Для вашего css вам нужно использовать отдельную таблицу стилей. Таким образом вам нужно всего лишь определить два набора правил и избежать дублирования кода. В любом случае, как только вы настроите эту настройку, просто примените этот код.

#leftblock, #rightblock{ 
    margin-bottom: 35px; 
} 

Это дает запас 35px к нижней части каждого DIV, который имеет идентификатор leftblock или rightblock.

EDIT: Моя ошибка, в соответствии с ответом @ Skullclutter, используйте классы вместо ids.

Answer 2

Добавляем одну вещь: на странице может быть только одно имя для каждого идентификатора. Для того, что вы делаете, я бы предложил вместо этого использовать class=leftblock и class=rightblock.

Тогда код Эрика становится:

.leftblock, .rightblock{ 
    margin-bottom: 35px; 
} 

Answer 3

Как прямой ответ на ваш вопрос, вы можете использовать margin-bottom: 35px; добавить интервал ниже каждой коробки.

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

Прежде всего, id атрибуты должны быть уникальными на всей странице - идентификатор #content может появляться только один раз, поэтому они не идеальны для повторения элементов. Вместо этого используйте класс, который можно использовать так часто, как необходимо.

Далее следует использовать внешнюю таблицу стилей вместо встроенных стилей. Они намного проще в управлении и в отраслевом стандарте.

Как правило, рекомендуется использовать как можно больше элементов для ваших требований (комбинируя стилизацию на один элемент, когда это возможно).

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

#timeline{ 
 
    background-color:#fff; 
 
    float: left; 
 
    padding: 10px; 
 
    clear: left; 
 
    width: 900px; 
 
    margin-top: 25px; 
 
} 
 
#middle{ 
 
    background: transparent url('/timeline.png') repeat-y scroll 0px 0px; 
 
} 
 
.block{ 
 
    float: left; 
 
    width: 400px; 
 
    display: block; 
 
    margin-right: 23px; 
 
    margin-bottom: 35px; 
 
} 
 
.block .content{ 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
} 
 

 
.icon{ 
 
    float: left; 
 
} 
 
.block:nth-of-type(odd) .icon{ 
 
    float: right; 
 
}

<div id="timeline"> 
 
    <div id="middle"> 
 
     <div class="block" > 
 
      <img class="icon" src="/dot1.png" /> 
 
      <img class="icon" src="/right_arrow.png" /> 
 
      <div class="content">adfasdfsdaf</div> 
 
     </div> 
 

 
     <div class="block"> 
 
      <img class="icon" src="/dot1.png" /> 
 
      <img class="icon" src="h/left_arrow.png" /> 
 
      <div class="content">adfasdfsdafadfasdfsdaf<br />adfasdfsdaf<br /></div> 
 
     </div> 
 
     <div class="block" > 
 
      <img class="icon" src="/dot1.png" /> 
 
      <img class="icon" src="/right_arrow.png" /> 
 
      <div class="content">adfasdfsdaf<br />adfasdfsdaf<br /></div> 
 
     </div> 
 

 
     <div class="block"> 
 
      <img class="icon" src="/dot1.png" /> 
 
      <img class="icon" src="h/left_arrow.png" /> 
 
      <div class="content">adfasdfsdaf</div> 
 
     </div> 
 

 
    </div> 
 
</div>

http://jsfiddle.net/daCrosby/g2w6dzo3/1/