Как выровнять два контейнера по горизонтали для CSS?

Я новичок в CSS. Я пробовал использовать блок отображения, но это не сработало. Это не только для центра, здесь также отображается много контейнеров. Я пробовал использовать margin-bottom и right, но это тоже не сработало и стало похоже на крест, почти на параллель.

Я пытаюсь выровнять четвертый и пять div. Черно-красный. Буду признателен, если вы попытаетесь увидеть мой код, заранее спасибо.

div#first {
  background-color: #FF0000;
  height: 180px;
  width: 180px;
  float: left;
  position: relative;
}

div#third {
  background-color: blue;
  height: 180px;
  width: 190px;
  float: left;
  margin-left: 190px;
  position: relative;
}

div#fourth {
  display: block;
  background-color: black;
  height: 100px;
  width: 100px;
  margin-left: 5px;
  float: left;
}

div#five {
  background-color: red;
  height: 100px;
  width: 100px;
  float: left;
}

div#six {
  background-color: navy;
  height: 100px;
  width: 100px;
  float: left;
  margin-left: 400px;
}

div#hello1 {
  background-color: navy;
  width: 80px;
  height: 100px;
  position: absolute;
  bottom: 90px;
}

div#hello2 {
  background-color: orange;
  width: 200px;
  height: 100px;
  bottom: 90px;
  margin-left: 85px;
  position: absolute;
}

div#hello3 {
  background-color: red;
  width: 130px;
  height: 100px;
  position: absolute;
  bottom: 90px;
  margin-left: 290px;
}

div#hello4 {
  background-color: navy;
  width: 150px;
  height: 100px;
  position: absolute;
  bottom: 90px;
  margin-left: 425px;
}

<div class = "content" id = "first"> </div>
<div class = "content" id = "third"> </div>
<div class = "content" id = "fourth"> </div>
<div class = "content" id = "five"> </div>
<div class = "content" id = "six"> </div>
<div class = "content" id = "hello1"> </div>
<div class = "content" id = "hello2"> </div>
<div class = "content" id = "hello3"> </div>
<div class = "content" id = "hello4"> </div>

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

Проверьте это.

— 30.03.2021 16:01

css

30.03.2021 15:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 2

Вы можете поместить div вокруг четвертого и пятого div и установить отображение flexbox. Затем используйте justify-content и align-items, чтобы разместить свой div там, где вы хотите.

30.03.2021 16:04

Не думаю, что я полностью понимаю, что вы имеете в виду, но посмотрите на этот фрагмент и скажите мне, если это то, что вы ищете (откройте

div#first{
    background-color: #FF0000;
    height: 180px;
    width: 180px;
    float: left;
}

 div#third{
     background-color: blue;
     height: 180px;
    width: 190px;
    float: left;
 }

 div#fourth{
     background-color: black;
     height: 100px;
    width: 100px;
   float: left;

 }

 div#five{
     background-color:  red;
     height: 100px;
     width: 100px;
     float: left;

 }

 div#six{
     background-color: navy;
     height: 100px;
    width: 100px;
    float: left;
 }

 div#hello1{
      background-color: navy;
     width: 80px;
     height: 100px;
     position: absolute;
     bottom:90px;
 
 }

 div#hello2{
      background-color: orange;
     width: 200px;
     height: 100px;
     bottom:90px;
     margin-left: 85px;
     position: absolute;
 
 }

 div#hello3{
     background-color: red;
     width: 130px;
     height: 100px;
     position: absolute;
     bottom:90px;
     margin-left: 290px;
  
 }

 div#hello4{
     background-color: navy;
     width: 150px;
     height: 100px;
     position: absolute;
     bottom:90px;
     margin-left: 425px;
 
 }


#aligned {
  display : flex;
flex-direction: column;
}

<body>
<div class = "content"   id = "first">  </div> 
<div class = "content"   id = "third">  </div> 
  <div id = "aligned">
<div class = "content"   id = "fourth">  </div> 
<div class = "content"   id = "five">  </div>
    </div>
<div class = "content"   id = "six">  </div> 
</body>

30.03.2021 16:08

Другие вопросы по теме

Стили в style.css дочерней темы в wordpress не работают в теме Avante

Неопределенный индекс: комментарий в C: \ xampp \ Xampp \ htdocs \ forum \ functions \ addcomment.php в строке

Как заставить кнопку создавать новую страницу в html с элементами js?

Html файл ветки не может найти путь к моему файлу css в приложении Symfony

Применить анимацию перехода на панели навигации

Как сделать изогнутую форму градиентом?

Сделайте столбец как требуется в html

Как правильно выбрать базу данных для приложения Quiz (веб)?

Свойства файла CSS не применяются в коде HTML

Мульти-вложенное меню Javascript / css

Как выровнять два контейнера по горизонтали для CSS?

Ответы 2

Другие вопросы по теме

Похожие вопросы