2

Есть такая разметка:

.boxs {
  display: inline-block;
  margin-left: 50px;
}
.side {
  display: inline-block;
}

.box4 {
  padding: 7px 25px 7px 25px;
  background-color: red;
}
<div class="container">
  <div class="boxs box1">Box1</div>
  <div class="boxs box2">Box2.1 <br> Box2.2 <br> Box2.3</div>
  <div class="side">
    <div class="boxs box3"><img src="https://images.urbanoutfitters.com/is/image/UrbanOutfitters/30968168_001_s"></div>
  <div class="boxs box4">BTN</div>
  </div>
</div>

Нужно сделать, чтобы элемент .box1 был отцентрирован по вертикали .container'а (высота контейнера зависит от контента блока .box2).

Блок с картинкой должен занимать всю высоту контейнера и блок .box4 должен быть так же отцентрирован, как .box1.

Как это можно сделать? Знаю, что это, вроде как, можно сделать с использованием flexbox, но как это можно сделать без него? Если не трудно приведите пожалуйста 2 варианта, с флексами и без.

И почему вообще при использовании <br> блоки, которые находятся рядом выравниваются именно по нижнему краю блока с тегом <br>?

3 ответа 3

2

Привет! Для оцентровки по вертикали попробуй: display: flex; vertical-align: center или middle; А позиционирование через width желательно в процентах + order.

Ps: хорошая игра чтобы научиться использовать flex : http://flexboxfroggy.com/

1

Мммм, так?

Это на display: flex

.container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.boxs {
  display: inline-block;
  margin-left: 50px;
}

.box3 img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100px;
}

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

.box4 {
  padding: 7px 25px 7px 25px;
  background-color: red;
}
<div class="container">
  <div class="boxs box1">Box1</div>
  <div class="boxs box2">Box2.1 <br> Box2.2 <br> Box2.3</div>
  <div class="boxs box3 container"><img src="https://images.urbanoutfitters.com/is/image/UrbanOutfitters/30968168_001_s">
  <div class="boxs box4">BTN</div>
  </div>
</div>

Это на display: table

.container{
  display: table;
}

.boxs {
  display: table-cell;
  vertical-align: middle;
  min-width: 100px;
}

.box3 img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100px;
  vertical-align: middle;
}

.box4 {
  padding: 7px 25px 7px 25px;
  background-color: red;
  vertical-align: middle;
  display: inline-block;
}
<div class="container">
  <div class="boxs box1">Box1</div>
  <div class="boxs box2">Box2.1 <br> Box2.2 <br> Box2.3</div>
  <div class="boxs box3"><img src="https://images.urbanoutfitters.com/is/image/UrbanOutfitters/30968168_001_s">
  <div class="boxs box4">BTN</div>
  </div>
</div>

0

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  background: gray;
}

.boxs {
  display: inline-block;
  margin-left: 5px;
}

.box1 {
  background: yellow;
  margin: auto 0;
}

.box2 {
  width: 100%;
  height: 100%;
  background-color: green;
}

.box3>img {
  width: 500px;
  height: 300px;
  float: left;
}

.box4 {
  padding: 7px 25px 7px 25px;
  background-color: red;
}

.side {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  background: orange;
  margin: auto 0;
  width: auto;
  height: auto;
}
<div class="container">
  <div class="boxs box1">Box1</div>
  <div class="boxs box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi accusantium quo aliquid quisquam repellat at sit ex fugit, temporibus adipisci tempore. Possimus molestiae explicabo aspernatur itaque facere aliquam eligendi sint veniam. Perferendis reiciendis
.</div>
  <div class="side">
    <div class="boxs box3"><img src="https://w-dog.net/wallpapers/5/18/307350940252041/jaguar-cats-nature.jpg"></div>
    <div class="boxs box4">BTN</div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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