Блог

Возможно ли поместить элемент div прямо перед элементом, который уже центрирован? Уже центрированный элемент div должен был бы выровняться с элементом div сверху. Я пытаюсь выполнить описанное ниже на рисунке

            --------
           |      |
           |  1   |
           --------
     ----  --------
     |   | |      |
     |3  | |  2   |
      ---  --------
  

блоки div 1 и 2 будут располагаться друг над другом. Я могу сделать это, выполнив простое поле: 0 автоматически;

 .div1 .div2{
  margin: 0 auto
}
  

Однако у меня возникли проблемы с установкой блока div 3 прямо перед 2. Значение float:left в блоке 3 div также не сработало. Есть ли какой-либо способ вставить блок div 3 перед 2, сохранив свойство margin: 0 auto в блоке div 2. Любая помощь или указатели будут оценены

Вы можете рассмотреть решение, основанное на CSS grid, как показано ниже:

 .container {
  display:grid;
  grid-template-columns:1fr auto 1fr;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
  grid-column:2;
}
.container > div:last-child {
  grid-column:1;
  grid-row:2;
}  

 <div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>  

Еще одна идея с flexbox:

 .container {
  display:flex;
  flex-wrap:wrap;
}

.container > div {
  min-height:50px;
  min-width:200px;
  outline:1px solid;
}
.container > div:first-child {
  order:-2;
  margin:auto; 
}
.container > div:last-child {
  order:-1;
  margin:0;
  flex:1;
}

/*to create break line*/
.container:before {
  content:"";
  order:-1;
  flex-basis:100%;
}

/*to have the same as 3*/
.container:after {
  content:"";
  flex:1;
}  

 <div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>  

Вы также можете рассмотреть возможность позиционирования:

 .container {
  position:relative;
}

.container > div:not(:last-child) {
  min-height:50px;
  max-width:200px;
  outline:1px solid;
  margin:auto;
}

.container > div:last-child {
  position:absolute;
  left:0;
  bottom:0;
  width:calc((100% - 200px)/2);
  min-height:50px;
  outline:1px solid;
}  

 <div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>  

Я выступаю за CSS Grid и grid-template-areas . В случае, если вы не знакомы с синтаксисом, . представляет собой пустую ячейку в сетке.

 .container { 
  display: grid;
  grid-gap: 8px;
  grid-template-areas: ". one"
                       "three two";
}
.container div {
  border: 1px dashed;
  padding: 4px;
}

.div1 {
  grid-area: one;
}

.div2 {
  grid-area: two;
  justify-self: flex-start;  
}

.div3 {
  grid-area: three;
  justify-self: flex-end;  
}  

 <div class="container">
  <div class="div1">div 1</div>
  <div class="div2">div 2</div>
  <div class="div3">div 3</div>
</div>  

Обновить

Я настроил элементы сетки так, чтобы они вели себя так, как вы просили в комментариях. Я удалил justify-content: center из родительской сетки, что позволяет элементам сетки расширяться до родительского контейнера. Затем я использовал justify-self для закрепления div2 и div3 в центре.