Как правильно расположить блоки?

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

У меня есть контейнер, внутри которого находятся 3 блока. В каждом блоке текст, картинка, ссылка.

Несколько вопросов:
1. Как мне правильно написать стиль, чтобы он отображался по людски?
2. Почему при свойстве inline-block класса контейнера блоки все равно располагаются ниже?
3. Почему divы, которые располагаются внутри контейнера, ведут себя как хотят и не располагаются внутри него?
4. Какие понятия/знания мне нужно погуглить, чтобы не задавать таких вопросов и не делать ошибок?

<div class="container">
    <div class="top-body" >
        <div class="left-top" >
            <p>ПУНКТ ПРОМЕЖУТОЧНОЙ СВЯЗИ ЦИФРОВОЙ С ИЗБИРАТЕЛЬНЫМ ВЫЗОВОМ</p>
            <a href="#">ППСЦ-ИВ</a>
            <img src="img/body-top.png" >
            <div class="left-top-text">
                ППСЦ-ИВ предназначен для работы в цифро-аналоговых и аналоговых сетях отделенческой телефонной избирательной связи на железнодорожном транспорте, метрополитене, газо- и нефтепроводах в качестве абонентской аппаратуры промежуточных станций, а также распорядительной станции диспетчерской связи.
            </div>
            <div class="left-top-text-price">От 700,000 руб.
            </div>
            <div class="left-top-logo">
                <img src="img/logo.png">
            </div>
        </div>

        <div class="vert-line-centre">
            <img src="img/vert-line.png">
        </div>

        <div class="centre-top" ">
            <p>ЛОКОМОТИВНО-СТАЦИОНАРНАЯ РАДИОСТАНЦИЯ</p>
            <br>
            <a href="#">РВС-1</a>
            <div class="body-center-text">
                Коммунальный модернизм, <br>несмотря на внешние воздействия.
            </div>
            <img src="img/RBS1.png">
        </div>

        <div class="right-top" >
            <p>СИСТЕМЫ АВТОМАТИКИ ДЛЯ</p>
            <br>
            <a href="#">ЖЕЛЕЗНОДОРОЖНЫХ<br> ПЕРЕЕЗДОВ</a>
            <div class="body-left-text">
                Коммунальный модернизм, <br>несмотря на внешние воздействия.
            </div>
            <img src="img/body-left.png" class="right-img">

        </div>

        <img src="img/vert-line.png" class="vert-line">
    </div>
</div>
  • Вопрос задан
  • 2681 просмотр
Пригласить эксперта
Ответы на вопрос 2
Anemo
@Anemo
В общем виде написал.
Чуть другой пример, но смысл тот же)
jsfiddle.net/cnr28/1
или так: jsfiddle.net/cnr28/2
тут 1 класс для блоков, меньше селекторов
Ответ написан
dsadasdad
@dsadasdad
lol
Нигде не видать даже позишн релатива. Флоат лефт должен быть, одним инлайном не отделаешься. Заливай на фидл jsfiddle.net там посмотрим
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы