时间戳

首页 > 解决方案 > 如何对齐这样的框？

html - 如何对齐这样的框？

问题描述

我想做的是下面的图片

在此处输入图像描述

我使用stackflow做到了这一点。 在此处输入图像描述

但即使找到了一些信息，我也无法理解定位框。接下来我该怎么做？

<!-- 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;
}

标签： htmlcss

解决方案

这是修复布局的简单方法之一。

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

或使用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;
}

推荐阅读