Как заставить расположить блоки рядом?
@Ridzhi немного изменил пример jsfiddle.net/YNr3b/4 теперь видно что справа блоки расположены горизонтально. Нужно чтобы левый пример работал также как и правый, только ширина .in должна быть auto/100% а не в пикселях
29 янв 2014 в 10:33
Так у вас у .in и так width: auto, не ?
29 янв 2014 в 10:46
@Ridzhi width: auto только на левом примере, который работает неправильно. Мне нужно чтобы блоки расположились горизонтально как на правом примере, а не вертикально как на левом. Вот только нужно чтобы обязательно у .in был width: auto, а не 300px как в правом примере
29 янв 2014 в 10:50
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.own-1 < overflow: hidden; border: 1px solid red; margin-bottom: 1em; >.own-2 < display: table-cell; width: 0; border: 1px solid red; >.a
1 2 3 1 2 3 Отслеживать
ответ дан 14 ноя 2015 в 7:42
124k 24 24 золотых знака 131 131 серебряный знак 312 312 бронзовых знаков
Возможное решение для вашего примера (используется абсолютное позиционирование).
html
1 2 3 css
.own < position: relative; overflow: hidden; width: 150px; >.in div < height : 100px; top: 0; width : 100px; >/** * Первому потомку ставим position: relative. Это обязательно. * Благодаря этому, автоматически посчитается высота для блока-обертки. * Высота блоков с абсолютным позиционированием не влияет на высоту блока-родителя. * Если внутри блока все потомки с абсолютным позиционированием, его высота равна 0 */ .q < background: #167e7d; position: relative; >.w < background: #f7853d; left: 100px; position: absolute; >.e
CSS/HTML Как поместить два блока рядом друг с другом
Я хочу знать, как я могу поместить эти два блока рядом друг с другом, «Новости» и «Популярные проекты», http://jsfiddle.net/2cQr9/ Я пробовал несколько раз, но не получилось.
HTML
News
lorem Popular Projects
Skin Selector
Elorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum CSS
body < background-color:#000; >a < text-decoration:none; >.topMsg < width:400px; margin:100px 50px; text-align:justify >.topMsg a,.popMsg a < color:#FFF; font-family:Arial, Helvetica, sans-serif; >.topMsg h2, .popMsg h2 < color:#069; font-size:32px; >.popMsg < width:250px; margin:100px 50px; text-align:justify; >.popMsg h3
Поделиться Источник 01 декабря 2013 в 13:39
5 ответов
Если для обоих из них достаточно места рядом друг с другом (margin/padding также считается пробелом!), вы можете просто float:left; их.
Поделиться 01 декабря 2013 в 13:44
В основном, элемент DIV находится в display:block .
Вам просто нужно изменить отображение вашего div «.popMsg» и «.topMsg».
.popMsg, .topMsg
.popMsg, .topMsg
Поделиться 01 декабря 2013 в 13:48
поместите следующие строки в конец вашего CSS:
div.topMsg < float:left; >div.popMsg < float:right; >div.footer
теперь они слева и справа, как вы хотели
Поделиться 01 декабря 2013 в 13:49
Вы можете иметь display:inline-block; в.topMsg и popMsg
.topMsg < width:400px; margin:100px 50px; text-align:justify; display:inline-block; >.popMsg
Поделиться 01 декабря 2013 в 13:44
Добавьте этот CSS код к элементам:
Два блока рядом CSS
Мне нужно расположить справа такой же блок. Пытался через float: left , но тогда основной блок уходит в упор влево.
Подскажите, как мне лучше сделать правильное расположение, чтобы основной блок остался по центру без изменений? 
Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
задан 13 мая 2020 в 21:12
13 1 1 серебряный знак 3 3 бронзовых знака
Покажите код, пожалуйста
13 мая 2020 в 21:22
Добавил, изменил вопрос
13 мая 2020 в 21:28
вам ответ тоже картинкой? (с)
13 мая 2020 в 21:29
Да, можно и картинкой 🙂
13 мая 2020 в 21:34
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
.wrap < border: 1px solid #000; display: inline-block; padding: 10px; >h1,h2 < margin: 0; >.men < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; margin-top: 10px; >.men_left img, .men_right img < width: 40px; height: 40px; margin-right: 5px; >.men_left < margin-right: 10px; border: 1px solid #000; padding: 10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; >.men_right < border: 1px solid #000; padding: 10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; >.token < border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 10px; margin-top: 10px; >.sgen < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; margin-top: 20px; -ms-align-items: center; align-items: center; >.link > a < border-top: 1px solid #000; border-bottom: 1px solid #000; text-decoration: none; color: #000; padding: 8px; >.link_button > button
Панель управления
Личная информация
MaYoR:D 76561198967718926 Настройка токенна тут ссылка123131312313 Как расположить два блока рядом css
Для того чтобы расположить рядом для элемента, например , которые по умолчанию блочные элементы, а значит занимают всю доступную ширину экрана, достаточно изменить тип отображения ( display ) на значение inline-block, и элементы встанут в ряд. Рассмотрим пример. Исходный HTML имеет вид:
class="block">Первый class="block">Второй
.block display: inline-block; border: 1px solid blue; margin: 2px; > С таким вариантом есть одна особенность. Если, к примеру, текст в во втором блоке будет сильно длинный, то браузер перенесет этот блок на новую строку чтобы уместить содержимое, и отобразить контент полностью.
Чтобы этого избежать можно применить другой способ, как расположить два блока рядом. Добавим в исходный HTML обертку, и назначим ему способ отображение как flex элемент. Во первых, наши элементы встанут в ряд, а во вторых, они не будут переносится на следующую строку. Вместо этого просто появится полоса прокрутки.
class="wrapper"> class="block">Первый class="block">Второй
.wrapper display: flex; > .block display: inline-block; border: 1px solid blue; margin: 2px; >