Как расположить div под a в div?

Question

[Dr_Gonzo]

Суть вопроса следующая: Есть div, в котором располагаются теги <a>, <div>, <div>, <div>, <div>. Выводится сейчас все в одну строку. Необходимо, чтобы тег <a> был на строке единственный, остальные <div>, должны быть под этим <а> и в строку (друг за другом).

Вот, как это выглядит в html:

<div class="main_div">
<a href="/en/tags/node" class="first_a">
<div class="slave_div_1">
<div class="slave_div_2">
<div class="slave_div_3">
<div class="slave_div_4">
</div>

Вот, как это отображается на странице:
<a> <div_1> <div_2> <div_3> <div_4>

Вот, как нужно, чтобы отображалось:

<a>
<div_1> <div_2> <div_3> <div_4>

Answer 1

[kreoTech]

Устроит так

Comments

[Dr_Gonzo]

Почему-то не работает, может быть для main_div нужно задать определенный класс?

[kreoTech]

Dr_Gonzo, не работает пример? Или при внедрении в ваш код?

[Dr_Gonzo]

мой код

[kreoTech]

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

Или выложить полную версию кода.

[Dr_Gonzo]

наверное проще дать ссылку на сайт - вот
правда необходимо зарегиться и выбрать какого-нибудь пользователя. в его профиле будут навыки, вот наименование навыка и картинка, на первой строке, вопросы, ответы и т.д. на второй строке

[kreoTech]

У вас флексы вообще задействованы...
Код надо полностью предоставлять.

Решение в вашем случае - https://c2n.me/3S7gBCs
Надо добавить в стили.

Answer 2

[Дмитрий Небов]

CSS:

.first_a {
   display: block;
}

Answer 3

[Евгений Кузовлев]

Добавьте перенос строки после a

<div class="main_div">
<a href="/en/tags/node" class="first_a"> <br>
<div class="slave_div_1">
<div class="slave_div_2">
<div class="slave_div_3">
<div class="slave_div_4">
</div>

Comments

[Dr_Gonzo]

необходимо именно стилями, не html