Как выровнять блоки по горизонтали?

@MrRuslanBB · Регистрация: 02.04.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте) Как выровнять блоки по горизонтали?

Такой вот код HTML

HTML5
1
2
3
4
5
6
7
        <section class="contact">
            <h1></h1>
            <div class="block_name">ADDRESS</div><div class="block_desc">Main Street, City.</div><br class = "clear"/>
            <div class="block_name">E-MAIL</div><div class="block_desc">contact@domain.com</div><br class = "clear"/>
            <div class="block_name">PHONE</div><div class="block_desc">555-555-555</div><br class = "clear"/>
            <div class="block_name">WEBSITE</div><div class="block_desc">www.yourweb.com</div>
        </section>

вот в css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.block_name {
    font-size: 4pt;
    font-weight: bold;
    color: #006cb4;
    padding-top: 15px;
    float: left;
 
}
 
.block_desc {
    font-size: 4pt;
    font-weight: 400;
    color: #000000;
    float: right;
}

Текст съезжает(

@brain-4-me · 17.11.2014, 11:31

MrRuslanBB, а не проще тебе сделать табличной версткой?

@MrRuslanBB · 17.11.2014, 13:21 **[ТС]**

Проще, но хотелось бы дивы научиться рядом распологать.

@brain-4-me · 17.11.2014, 13:26

MrRuslanBB, сейчас нарисую, покажу

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

@MrRuslanBB · 17.11.2014, 13:42 **[ТС]**

Мне нужно чтобы было 4 строки , расположение как в моём коде HTML
Тобишь первая строка это block_name + block_desc, далее следует вторая строка, тоже block_name + block_desc

И вот кажется я понял , что совсем неправильную структуру сделал

@brain-4-me · 17.11.2014, 13:58

MrRuslanBB, понял, сейчас попробую

Добавлено через 13 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <section class="contact">
            <h1></h1>
<div class="left">
            <div class="block_name">ADDRESS</div>
            <div class="block_name">E-MAIL</div>
            <div class="block_name">PHONE</div>
            <div class="block_name">WEBSITE</div>
 </div>
<div class="right">
            <div class="block_desc">Main Street, City.</div>
           <div class="block_desc">contact@domain.com</div>
          <div class="block_desc">555-555-555</div>
          <div class="block_desc">www.yourweb.com</div>
</div>
</section>

CSS
1
2
3
4
5
6
7
.right{
    float:right;
}
 
.left{
    float:left;
}

как вариант, а потом задавай стили

@Fedor92 · 17.11.2014, 14:02

Вариант 1

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
<section class="contact">
            <h1></h1>
            <div class="block_name" style="float:left">ADDRESS</div><div class="block_desc" style="float:left">Main Street, City.</div><br class = "clear"/>
            <div class="block_name" style="float:left">E-MAIL</div><div class="block_desc" style="float:left">contact@domain.com</div><br class = "clear"/>
            <div class="block_name" style="float:left">PHONE</div><div class="block_desc" style="float:left">555-555-555</div><br class = "clear"/>
            <div class="block_name" style="float:left">WEBSITE</div><div class="block_desc" style="float:left">www.yourweb.com</div>
        </section>

Вариант 2

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
<section class="contact" style="margin-top: 50px">
            <h1></h1>
            <div class="block_name" style="display:inline-block">ADDRESS</div><div class="block_desc" style="display:inline-block">Main Street, City.</div><br class = "clear"/>
            <div class="block_name" style="display:inline-block">E-MAIL</div><div class="block_desc" style="display:inline-block">contact@domain.com</div><br class = "clear"/>
            <div class="block_name" style="display:inline-block">PHONE</div><div class="block_desc" style="display:inline-block">555-555-555</div><br class = "clear"/>
            <div class="block_name" style="display:inline-block">WEBSITE</div><div class="block_desc" style="display:inline-block">www.yourweb.com</div>
        </section>

@brain-4-me · 17.11.2014, 14:08

точн) про inline то я забыл...
Fedor92, а почему ты так любишь стили прямо в коде прописывать? почему не css? потом просто переверстывать уж очень накладно получится..

@Fedor92 · 17.11.2014, 14:17

Сообщение от brain-4-me

Fedor92, а почему ты так любишь стили прямо в коде прописывать? почему не css? потом просто переверстывать уж очень накладно получится..

Ну во-первых потому-что при внутренней вёрстке легче править код, если его много не приходится нырять и искать классы и идентификаторы и их свойства, а так взял поправил и сразу посмотрел... Во-вторых при просмотре внутренних стилей можно сразу увидеть классы/идентификаторы с одинаковыми селекторами и при переносе во внешний css файл их объединить и сразу прописать одинаковые свойства... В-третьих быстрее прописать внутренние стили, чем их переносить в отдельный файл, а автор темы имеет возможность их сразу править, как ему захочется и переносить в свой css код... Нагляднее получается какому классу - какие свойства...

@brain-4-me · 17.11.2014, 14:27

Fedor92, спасибо) буду иметь ввиду

@Fedor92 · 17.11.2014, 14:30

Сообщение от brain-4-me

Fedor92, спасибо) буду иметь ввиду

Не за что...

В догонку... Забыл метод без стилей указать...
Спан:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
<section class="contact">
            <h1></h1>
            <span class="block_name">ADDRESS</span><span class="block_desc">Main Street, City.</span><br class = "clear"/>
            <span class="block_name">E-MAIL</span><span class="block_desc">contact@domain.com</span><br class = "clear"/>
            <span class="block_name">PHONE</span><span class="block_desc">555-555-555</span><br class = "clear"/>
            <span class="block_name">WEBSITE</span><span class="block_desc">www.yourweb.com</span>
</section>

Лэйбл:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
<section class="contact">
            <h1></h1>
            <label class="block_name">ADDRESS</label><label class="block_desc">Main Street, City.</label><br class = "clear"/>
            <label class="block_name">E-MAIL</label><label class="block_desc">contact@domain.com</label><br class = "clear"/>
            <label class="block_name">PHONE</label><label class="block_desc">555-555-555</label><br class = "clear"/>
            <label class="block_name">WEBSITE</label><label class="block_desc">www.yourweb.com</label>
</section>

Старый добрый span и label...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	17.11.2014, 11:31
	MrRuslanBB, а не проще тебе сделать табличной версткой? 0

@MrRuslanBB 7 / 7 / 6 Регистрация: 02.04.2012 Сообщений: 321
	17.11.2014, 13:21 [ТС]
	Проще, но хотелось бы дивы научиться рядом распологать. 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	17.11.2014, 13:26
	MrRuslanBB, сейчас нарисую, покажу Добавлено через 3 минуты что то я не понял, тебе точно по горизонтали надо? нарисуй где нибудь чтобы понятнее было..а то как то я в смутении 0

@MrRuslanBB 7 / 7 / 6 Регистрация: 02.04.2012 Сообщений: 321
	17.11.2014, 13:42 [ТС]
	Мне нужно чтобы было 4 строки , расположение как в моём коде HTML Тобишь первая строка это block_name + block_desc, далее следует вторая строка, тоже block_name + block_desc И вот кажется я понял , что совсем неправильную структуру сделал 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	17.11.2014, 14:08
	точн) про inline то я забыл... Fedor92, а почему ты так любишь стили прямо в коде прописывать? почему не css? потом просто переверстывать уж очень накладно получится.. 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	17.11.2014, 14:27
	Fedor92, спасибо) буду иметь ввиду 0