Блоки в одну строку
Ребят, такая проблема. Хочу чтобы лого был на одной строке с меню, я это сделал. Но меню очень низко сидит на странице (т.к. на одном уровне с эмблемой). Как сделать так, чтобы лого осталось на этой же позиции, а блок меню поднялся чуть выше?
.header < color: #22D99F; background-color: #052230; border: 3px solid #6593E1; border-radius: 30px; font-size: 40px; margin-top: 50px; margin-left: 200px; margin-right: 10px; padding-left: 50px; padding-right: 50px; padding-bottom: 10px; padding-top: 10px; text-align: center; width: 1100px; >.news < margin-right: 30px; display: inline-block; font-size: 30px; background-color: #6593E1; border: 5px solid #382C49; border-radius: 30px; color: #D2C2E1; padding-left: 10px; padding-right: 10px; width: 200px; text-align: center; >.news:hover < background-color: #78527E; color: lime; >.hood < display: inline-block; >.lab < margin-left: 50px; margin-top: 50px; width: 200px; height: 250px; background-image: url('http://russia-assault.ru/files/forums_imgs/1506001407.png'); background-position: center; > Новости Статистика Турниры Матчи
Если не совсем поняли суть вопроса — пишите. Спасибо.
Отслеживать
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак
задан 7 янв 2019 в 23:19
15 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
Добавьте, пожалуйста, полный код, не вижу в примере класса .lab
7 янв 2019 в 23:34
@meine добавил,извини,что так некрасиво табуляцию произвел,надеюсь поймешь.
8 янв 2019 в 5:24
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Хочу чтобы лого был на одной строке с меню, я это сделал.
Не подумайте, что это оскорбление, но я не увидел картинку и меню на одной строке.
Здесь я привел пример как Вы можете выстроить свой код, а снизу я расскажу в общем о выстраивании элементов в 1 линию/строку.
Все рассматривать не буду, расскажу только об основных, которые чаще всего используются на практике и хорошо себя зарекомендовали, для каждой задачи подход может быть разным.
Выровнить элементы в одну строку можно несколькими способами:
- display: inline-block; — данное свойство определяет элемент как строчно-блочный, другими словами выстраивает элементы в строку. ВНИМАНИЕ! Если не установить свойство width , блоки примут по умолчанию значение ширины всей страницы и от свойства display не будет ни какого толку. Важно понимать что элементы встанут в одну линию если для них обоих (или более) будет задано свойство display: inline-block при этом между ними не будет других элементов, с отличным от данного, свойством.
.block
- float: left/right; — Аналогичное по результату display: inline-block , но отличное по принципам работы свойство float — в переводе с английского означает — обтекание. Если мы изменим наш предыдущий пример, то результат окажется точно таким же, но важное отличие состоит в том что данное свойство достаточно назначить одному элементу, а следующий в независимости от свойств встанет в одну строку с ним. Но это сработает только с заполненными элементами типа
с текстом внутри, а в данном случае элемент без свойства float встанет в тоже самое место что и предыдущий элемент. Для того что бы его подвинуть необходимо использовать margin-right
.block
- display: flex; — c помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю. Для начала надо знать, что flex-элементы располагаются по осям. По умолчанию элементы располагаются по горизонтали — вдоль main axis — главной оси. Так же следует иметь в виду, что при использовании Flexbox для внутренних блоков не работают float , clear и vertical-align , а так же свойства, задающие колонки в тексте. И теперь родительскому( .container ) элементу добавляем display: flex; . Внутренние div -ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.
.container < display: flex; >.block
Главную суть выстраивания элементов я передал, подробнее Вы сможете почитать в интернете. Снизу я приложу ссылки.
Подробнее о свойстве display: flex; Вы можете почитать перейдя по этой ссылке.
Свойство display: inline-block; ссылка
Свойство float: left/right; ссылка
Как сделать несколько блоков в одну строку html
Два или более разных div одинаковой высоты могут быть помещены рядом с помощью CSS. Используйте свойство CSS, чтобы установить высоту и ширину div, и используйте свойство display, чтобы разместить div в формате рядом друг с другом.
Используемые свойства отображения перечислены ниже:
display:table: Это свойство используется для элементов (div), которые ведут себя как таблица.
display:table-cell: Это свойство используется для элементов (div), которые ведут себя как td.
display:table-row: Это свойство используется для элементов (div), которые ведут себя как tr.
С помощью гибкой модели макета CSS3 вы можете очень легко создавать столбцы или div элементы одинаковой высоты, которые выровнены рядом.
body <
width:70%;
>
.damisamu-dsakgcesan .kesagub <
width:540px;
margin:50px;
display:table;
>
.damisamu-dsakgcesan .kesagub .gsame-kigcesan <
display:table-row;
>
.damisamu-dsakgcesan .kesagub .kesagub-cell <
display:table-cell;
width:50%;
padding:10px;
>
.damisamu-dsakgcesan .kesagub .kesagub-cell.kesagub1 <
background: #076507;
color: #f7f4f4;
text-align: justify;
>
.damisamu-dsakgcesan .kesagub .kesagub-cell.kesagub2 <
background: #253865;
text-align: justify;
color: #fdfdfd;
>
Также вы уже самостоятельно можете их редактировать по цветовой гамме или по оформлению, где можно добавить красивые обводы и тени, все зависит от дизайна, где будут установлены.
Прикрепления: 1394686.png (54.6 Kb)
Администраторы
Сообщений: 43953
APPLE
Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
GLOBE
Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
VOLLEYBALL-BALL
Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
AMAZON-PAY
Lorem Ipsum морковь усиливается скидки. Обеспечить усиленный обвиняемым. Но не через желание их сразу взять его с презрением исследователя о желании придраться ни один из нас должен отвергнуть его и обнажая то, что должно произойти.
section#services <
width: 100%;
background-color: #07876A;
padding: 50px 0;
display: flex;
>
.container width: 100%;
max-width: 320px;
margin-left: auto;
margin-right: auto;
>
.blocks-container text-align: center;
>
.block margin: 30px 0;
background-color: #983351;
padding: 30px 10px;
width: 100%;
>
.block:hover background-color: #AA3939;
>
#services .icon font-size: 50px;
display: inline-block;
background-color: #AA8439;
padding: 20px;
height: 100px;
width: 100px;
border-radius: 50%;
color: #fff;
cursor: pointer;
>
#services h3 font-weight: 800;
font-size: 25px;
padding: 20px 0;
font-family: ‘Cinzel’, serif;
>
#services .icon:hover background-color: #fff;
color: #AA8439;
>
@media screen and (min-width: 768px) <
.container max-width: 720px;
>
.block float: left;
width: 46%;
margin-left: 2%;
margin-right: 2%;
>
>
@media screen and (min-width: 992px) .container max-width: 960px;
>
Урок: блоки в одну строку CSS
Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.
Группа блоков внутри родительского блока:
< div >Текст текст текст текст текст текст < / div >
< div >Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст < / div >
< div >Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст < / div >
< div >Тексттекст текст текст < / div >
Пусть будет известно, что будут располагаться блоки в одну строку и их количество будет равно 4-м, зная это можно рассчитать ширину блоков и отступов между ними в относительных величинах — в процентах.
Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.
Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.
Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.
Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.
Несколько div в одну строку
Несколько div в одну строку
Всем доброго времени суток! Сделал несколько div с свойством display: inline-block. Все они.
Как выровнять div в одну строку при условии что обварачивающий div с auto размерами?
Доброго времени суток коллеги! Подскажите пожалуйста такую вещь: есть div "обертка" с размерами.
Div в одну строку
ashten.kzhttp://ashten.kz Как сделать Дивы в одну строку, верху сайта есть картинка, потом.
Как разместить div в одну строку
Здравствуйте, подскажите, нужно вставить такой код <div <div >
2585 / 1676 / 731
Регистрация: 13.03.2010
Сообщений: 5,630
1 2 3 4 5 6 7 8
div class="row"> div class="cell">1/div> div class="cell">2/div> div class="cell">3/div> div class="cell">4/div> div class="cell">5/div> div class="cell">6/div> /div>
1 2 3 4 5 6 7 8
.row { display: flex; flex-wrap:wrap; flex-direction:row; } .cell { flex: 50%; }
307 / 260 / 70
Регистрация: 01.12.2008
Сообщений: 1,031
Обычным «флоатом», а после каждого второго произвести очистку последнего. Можно провести разметку «флэксбоксом». Но по виду это таблица и почему бы ее и не применить??
181 / 149 / 55
Регистрация: 21.07.2013
Сообщений: 958
wwowa, эйййй, какие таблицы. Забудем что было сказано )))
154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
Про флоаты также можно забыть, есть flex и grid
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
Без всяких флексов, флоатов и тем паче гридов :
1 2 3 4 5 6 7 8
div class="row"> div class="cell">1/div> div class="cell">2/div> div class="cell">3/div> div class="cell">4/div> div class="cell">5/div> div class="cell">6/div> /div>
1 2 3 4 5 6 7 8
.row { font-size: 0; } .cell { width: 50%; font-size: 16px; display: inline-block; }
181 / 149 / 55
Регистрация: 21.07.2013
Сообщений: 958
так что это все стали отворачиваться от float, вроде это так сложно и вообще не практично. Чем бы еще заморочить голову ))
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
prudkiy, ну потому что это можно сделать без них и проще
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,707
Сообщение от prudkiy 
так что это все стали отворачиваться от float
Слишком много возни с ними.
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
Сообщение от Mr Coder
Сообщение от prudkiy
так что это все стали отворачиваться от float
Слишком много возни с ними.
полностью согласен
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
Сообщение от prudkiy
так что это все стали отворачиваться от float
Флоаты изначально не были созданы для подобных вещей, да и зачем их для этого использовать если можно обойтись более простыми способами?
181 / 149 / 55
Регистрация: 21.07.2013
Сообщений: 958
AlexZaw, 6elka1703, Mr Coder, float — сложно. Really? ребят, аж печально стает от того что использования данного свойства для современного разработчика это бл. ть сложно
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
prudkiy,
Сообщение от prudkiy
AlexZaw, 6elka1703, Mr Coder, float — сложно. Really? ребят, аж печально стает от того что использования данного свойства для современного разработчика это бл. ть сложно
никто и не говорил что float — сложно. Скорей неудобно, да и гемороя от них куча
154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
prudkiy, вы бы еще про таблицы вспомнили)) Флоат совсем для других вещей создавался, ну и мы не 2000 году живем чтоб все на флоатах верстать
2240 / 1628 / 641
Регистрация: 07.08.2016
Сообщений: 3,928
prudkiy, float не сложно, просто нужно его применять там где он необходим, а не бездумно использовать везде подряд. Вот скажите, зачем в данной задаче его использовать и засорять код лишними clearfix-ами,когда прекрасно можно обойтись инлайн-блоками? Да, использование флоат было оправдано когда таблицы уже отошли, а флексы еще не появились/была плохая поддержка.
Но сейчас то можно выбирать, и если можно использовать флексы, я лучше воспользуюсь ими чем буду использовать флоат, если, допустим, нужно выстроить меню в линию — скорее воспользуюсь display: inline-block; . А флоаты будуиспользовать по их прямому назначению, а именно для вставки обтекаемых блоков в текст.
Кстати,нужно помнить, что другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
Т.е. вот в таком коде:
1 2 3 4 5
div class="float">img src="http://placekitten.com/g/200" alt="">/div> div class="block"> div class="inner">/div> Lorem ipsum dolor sit amet. /div>
1 2 3 4 5 6 7 8 9 10 11 12
.float{ float: left; opacity: 0.5; } .block{ background: green; } .inner{ width: 50px; height: 50px; background: #000; }
придется для .inner делать отступ на ширину картинки, так как мы видим что на него обтекание не действует.
В общем флоаты это не плохо или сложно, но применять их нужно там где это необходимо