Как разместить два блока на одной строке? [закрыт]

104

21 августа 2019, 07:10

Подскажите, как правильно разместить два блока, которые обведены красной рамкой?
(без использования фреймворков)

Answer 1

Способов располагать блоки в строку несколько, вы можете пойти самым обычным путем (по-старинке), пример вам привел @IvanTokar. Также можно воспользоваться flexbox или grid, это если просто использовать только возможности самих HTML и CSS.

Пример, используя grid:

.grid-container { 
  display: grid; 
  grid-template-areas: '. grid-container-social . copyrights . . ';  
  align-content: center; 
} 
.copyrights { 
  grid-area: copyrights; 
} 
.grid-container > div { 
  background-color:lightblue; 
  text-align: center; 
  padding: 15px 0; 
  font-size: 14px; 
} 
.grid-container-social { 
  display: grid; 
  grid-area: grid-container-social; 
  grid-template-columns: auto auto auto  auto auto auto; 
  align-content: center; 
} 
.div-socnetw { 
  background-color: rgba(247, 247, 240, 0.8); 
  text-align: center; 
  padding:5px 0; 
  font-size: 14px; 
  border: 1px solid gray; 
}

<div class="grid-container"> 
  <div class="empty"></div> 
  <div class="grid-container-social"> 
    <div class="div-socnetw">1</div> 
    <div class="div-socnetw">2</div> 
    <div class="div-socnetw">3</div>   
    <div class="div-socnetw">4</div> 
    <div class="div-socnetw">5</div> 
    <div class="div-socnetw">6</div>   
  </div> 
  <div class="empty"></div> 
  <div class="copyrights">2017. All Right Reserved</div>   
  <div class="empty"></div> 
  <div class="empty"></div> 
</div>

Более подробнее можно почитать на MDN.
В игровой форме можно разобраться с сеткой на Grid Garden

Пример, используя flexbox:

.footer { 
  display: flex; 
  flex-flow: row nowrap; 
  background-color:lightblue; 
  text-align: center; 
  padding: 15px 0; 
  font-size: 14px; 
} 
.flex-container-social { 
  display: flex; 
  flex-flow: row nowrap; 
  margin: 0 20px 0 20px; 
} 
.div-socnetw { 
  background-color: rgba(247, 247, 240, 0.8); 
  text-align: center; 
  padding:5px; 
  font-size: 14px; 
  border: 1px solid gray; 
}

<div class="footer"> 
  <div class="flex-container-social"> 
    <div class="div-socnetw">1</div> 
    <div class="div-socnetw">2</div> 
    <div class="div-socnetw">3</div>   
    <div class="div-socnetw">4</div> 
    <div class="div-socnetw">5</div> 
    <div class="div-socnetw">6</div>   
  </div> 
  <div class="copyrights">2017. All Right Reserved</div> 
</div>

Подробнее про flexbox на MDN.
Проработать вопрос в игровой форме на сайте Flexbox Froggy

Я бы вам рекомендовал больше давить на flexbox он актуальный и поддерживается современными браузерами, и самое главное с ним очень просто работать, grid практически подтянулся. Все основные браузеры его уже поддерживают. Но с ним надо посидеть.

Answer 2

Вы можете использовать flexbox (здесь можно попрактиковаться Flexbox Playground)
Или же по старинке:

.container { 
	padding: 10px; 
	background: #eee; 
	text-align: center; 
	clear: both; 
} 
 
.left { 
	float: left; 
}

<div class="container"> 
	<div class="left">left content</div> 
	<div>center content</div> 
</div>

Создание интернет-магазина кондитера в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить массив данных из java servlet в коде javascript на странице?

Разбираю окно поиска с автозаполнением и столкнулся с вопросом, как передать данные из сервлета в страницу html использующую javascriptкод самого...

jQuery

Поиск динамически созданного элемента jQuery

Есть функция в которой при загрузке скрипта перебираюся все

100

jQuery

Некорректно работает responsive в slick-slider в chrome и opera

Задала брейкпойт 768px чтобы показывалось 2 слайдера, но это срабатывает при разрешении экрана 687px в ChromeВ браузераx Microsoft Edge и Firefox все нормально...

Как соединить поля и получить значения из таблицы

Есть таблица cookies и meta:

105