如何将两个 Div 相互对齐？

【问题标题】：how to can align a two Divs with each others?如何将两个 Div 相互对齐？
【发布时间】：2021-12-28 13:16:49
【问题描述】：

我正在尝试使用预览进行多张图片上传，但正如您在截取的代码中看到的那样，存在设计问题。 问题是add image div 没有与images 对齐。 希望你能帮我找到问题。

Codepen

.gallery{
    background-color: #fbfbfb;
    border-radius: 5px;
    border-style: solid;
    border: 1px solid #bbbbbb;
    height: 85px;
    line-height: 1;
    box-sizing: border-box;
    margin: 12px;
    height: auto;
}
input[type="file"] {
    display: none;
}
.images-upload {
    background-color: #ffffff;
    border-radius: 5px;
    border: 1px dashed #ccc;
    display: inline-block;
    padding: 3px;
    cursor: pointer;
    width: 165px;
    height: 85px;
}
.images-preview {
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 140px;
    height: 80px;
    padding-top: -14px;
}
.button-container{
    display: inline-flex;
    height: 90px;
    width: 140px;
}
.image-container{
    display: inline-table;
    height: 90px;
    width: 140px;

}
.custum-icon{

    
    color: #00afca;
}
.close-btn{
    background: none;
    color: white;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    position: relative;
    left: -136px;
    top: -15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 0px;

}
.close-btn:hover{
    color: red;
    box-shadow: red 0px 7px 29px 0px;
}

.m-0 {
margin: 0 !important;
}
.w-100 {
width: 100% !important;
}
.border-danger {
border-color: #dc3545 !important;
}
.mx-1 {
margin-right: 0.25rem !important;
margin-left: 0.25rem !important;
}
.p-3 {
padding: 1rem !important;
}
.text-center {
text-align: center !important;
}
.m-1 {
margin-top: 0.25rem !important;
}

.container {
  margin-right: 3rem;
  margin-left: 3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/style.css" class="href">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- https://animate.style   cdn -->
    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <title>DROP</title>
</head>
<body>
    <!--CONATAINER DIV-->
    <div class="container">
        <!--GALLERY AREA TEST WITH 1 IMAGE-->
        <div class="gallery w-100 m-2" >
            <div class="p-3">

                <!--UPLOAD BUTTON-->
                <div class="button-container ">
                    <label for="images-upload" class="images-upload text-center">
                        <i class=" fas fa-plus-circle fa-3x custum-icon " style=" transform: translateY(+31%);"></i>
                    </label>     
                    <input id="images-upload" type="file" name="images" multiple="multiple">
                </div> 

                <!--IMAGES PREVIEW-->
                
                <div class="image-container">
                    <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt=""  class="images-preview">
                    <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
                </div> 
                <div class="image-container my-1 ">
                    <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt=""  class="images-preview">
                    <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
                </div> 
                
                
            </div>
        </div>
    </div>

</html>

【问题讨论】：

    标签： html css responsive-design frontend


    【解决方案1】：

    你可以在类p-3的div后面加上display:flex：

    &lt;div class="p-3" style="display:flex;"&gt;

    当您将 images-preview 类的高度定义为 80px 时，button-container div 将在其高度设置为 90px 时明显变大。

    【讨论】：

    • 又出现了一个问题！图像溢出画廊容器。请减少你的浏览器的注意我的意思。 ibb.co/YQFP3qb
    【解决方案2】：

    我创建了两个类 d-flex 和 gap10，并在 CSS 中将图像预览的高度调整为 90 像素。
    然后我在&lt;!-- Upload Button --&gt;上方的html div中添加了这两个类

    .gallery {
  background-color: #fbfbfb;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid #bbbbbb;
  height: 85px;
  line-height: 1;
  box-sizing: border-box;
  margin: 12px;
  height: auto;
}

input[type="file"] {
  display: none;
}

.images-upload {
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px dashed #ccc;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  width: 165px;
  height: 85px;
}

.images-preview {
  border-radius: 5px;
  border: 1px solid #ccc;
  display: inline-block;
  width: 140px;
  height: 90px;
  padding-top: -14px;
}

.button-container {
  display: inline-flex;
  height: 90px;
  width: 140px;
}

.image-container {
  display: inline-table;
  height: 90px;
  width: 140px;
}

.custum-icon {
  color: #00afca;
}

.close-btn {
  background: none;
  color: white;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  position: relative;
  left: -136px;
  top: -15px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  width: 0px;
}

.close-btn:hover {
  color: red;
  box-shadow: red 0px 7px 29px 0px;
}

.m-0 {
  margin: 0 !important;
}

.w-100 {
  width: 100% !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.text-center {
  text-align: center !important;
}

.m-1 {
  margin-top: 0.25rem !important;
}

.container {
  margin-right: 3rem;
  margin-left: 3rem;
}

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

.gap10 {
  gap: 10px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css" class="href">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <!-- https://animate.style   cdn -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <title>DROP</title>
</head>

<body>
  <!--CONATAINER DIV-->
  <div class="container">
    <!--GALLERY AREA TEST WITH 1 IMAGE-->
    <div class="gallery w-100 m-2">
      <div class="p-3 d-flex gap10">

        <!--UPLOAD BUTTON-->
        <div class="button-container ">
          <label for="images-upload" class="images-upload text-center">
                        <i class=" fas fa-plus-circle fa-3x custum-icon " style=" transform: translateY(+31%);"></i>
                    </label>
          <input id="images-upload" type="file" name="images" multiple="multiple">
        </div>

        <!--IMAGES PREVIEW-->

        <div class="image-container">
          <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
          <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
        </div>
        <div class="image-container my-1 ">
          <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" class="images-preview">
          <button class="close-btn "> <i class="fas  fa-2x fa-times"></i></button>
        </div>


      </div>
    </div>
  </div>

</html>

    您不应该使用诸如style="display:flex;" 之类的内联样式，因为从长远来看，它确实会搞砸事情。如果你想摆脱差距，只需从 HTML 和 CSS 中删除类。兼容性请查看this。

    【讨论】：

    • 又出现了一个问题！图像溢出画廊容器。请减少你的浏览器的注意我的意思。 ibb.co/YQFP3qb
    • @Forbiden 只需添加 d-flex 类：flex-wrap:wrap; 就可以了。
    猜你喜欢
    • 1970-01-01
    • 2015-02-23
    • 2020-04-14
    • 1970-01-01
    • 2020-10-17
    • 2014-11-18
    • 1970-01-01
    • 1970-01-01
    • 2020-06-13
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode