2

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

введите сюда описание изображения

2
  • 2
    Добавьте ваш код 21 янв 2019 в 12:11
  • Можно использовать абсолютное позиционирование 21 янв 2019 в 14:14

2 ответа 2

5

Способов располагать блоки в строку несколько, вы можете пойти самым обычным путем (по-старинке), пример вам привел @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 практически подтянулся. Все основные браузеры его уже поддерживают. Но с ним надо посидеть.

1
  • 1
    хороший, информативный ответ 29 янв 2019 в 17:31
2
  1. Вы можете использовать flexbox (здесь можно попрактиковаться Flexbox Playground)
  2. Или же по старинке:

.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>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.