Сделать divs справа друг от друга

Я пытаюсь сделать так, чтобы, если я копирую и вставляю div, вставленный div появляется прямо под тем, который я скопировал. Вот мой код:Сделать divs справа друг от друга

.friend { 
 
    position: relative; 
 
    text-decoration: none; 
 
}

<a class="friend" href="#1"> 
 
    <div class="user-status" id="friend-status"></div> 
 
    <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png"> 
 
    <h5 id="friend-name">Jane Doe</h5> 
 
</a> 
 
<a class="friend" href="#2"> 
 
    <div class="user-status" id="friend-status"></div> 
 
    <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png"> 
 
    <h5 id="friend-name">Jane Doe</h5> 
 
</a> 
 
<a class="friend" href="#3"> 
 
    <div class="user-status" id="friend-status"></div> 
 
    <img id="friend-profile-picture" src="images/talk/blank-profile-picture.png"> 
 
    <h5 id="friend-name">Jane Doe</h5> 
 
</a>

Это то, что он выглядит сейчас:

Я пытаюсь сделать расстояние между .friend дивы меньше, так что они ближе друг к другу вертикально. У них должен быть один класс.

источник

2017-02-20 Russell C.

Вы должны будете разместить дополнительные релевантные css. также, и это не касается вашего фактического вопроса, но вы используете 'id', как будто это' class'. должен быть только один уникальный 'id' на страницу, и у вас есть тот же' id' для всех трех тегов div, тегов img и тегов h5. – ethorn10

В чем проблема? Вы хотите, чтобы они были вертикально выровнены близко друг к другу. –

@NikhilNanjappa Я хочу, чтобы они как 1px друг от друга вертикально –

Если все, что вы хотите, чтобы дать сказать «динамический» 1px зазор между каждым friend элементом, а затем добавить ниже CSS будет делать

.friend:not(:last-of-type) { 
    margin-bottom: 1px; 
}

Это добавит нижний край 1px для всех .friend элементы исключая последний. Поэтому, даже если вы скопируете пасту, элемент будет автоматически присутствовать.

источник

2017-02-20 09:36:53

Попробуйте осмотреть элемент и посмотреть, какой элемент имеет прокладку или маржу. Скорее всего, это вызвано элементом H5.

источник

2017-02-20 02:20:10

Ни один из элементов не имеет поля/отступов, которые могут повлиять на это. Я просто установил бы дно на что-то подходящее, но все divs используют 1 класс, а нижнее будет увеличиваться для каждого div. –

Было бы полезно, если бы вы могли предоставить дополнительную информацию, такую как соответствующий CSS, снимок экрана элемента проверки и т. Д. Если возможно, вставьте свой код в [jsfiddle] (https://jsfiddle.net), чтобы люди могли вам помочь. –

Сделать divs справа друг от друга

ответ

Смежные вопросы