CODEWITHSUNDEEP
htmlcss
ssap
ssap

Reputation: 81

how to align boxes like this?

what i want to make is picture below

enter image description here

and i made it to this far, using stackflow. enter image description here

but i could't understand about positioning boxes even though found some infos. what should i do next?

<!-- html -->
 <div class="boxbox">
  <div class="box1">
    <img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
  </div>

  <div class="box2">
    <img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
  </div>

  <div class="box3">
    <img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
  </div>
</div>  


<!-- css -->

.boxbox{
  display: flex;
align-items: start;
  justify-content: space-between;
}

Upvotes: 2

Views: 65

Answers (1)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

This is one of simple approach for fix your layout.

.boxbox{
  display: flex;
align-items: start;
  justify-content: space-between;
}
img{
width:300px;
height:300px;
}
.box1,.box2{
width:50%
}
.box3{
width:50%;
margin:auto;
}
<div class="boxbox">
  <div class="box1">
    <img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
  </div>

  <div class="box2">
    <img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
  </div>
</div>
<div class="boxbox">
  <div class="box3">
    <img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
  </div>
</div>

Or using flex

.boxbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box1,
.box2,
.box3 {
  flex-basis: 50%;
  min-height: 100px;
}

img {
  width: 300px;
  height: 300px;
}

.box3 {
  margin: auto;
}

Upvotes: 1

Related Questions