如何使两个 Div 相互对齐？

Question

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

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

Answer 1

您可以在 div 之后添加 display:flex 和 class p-3:

<div class="p-3" style="display:flex;">

您定义class images-preview的高度为80px，button-container div的高度设置为90px会大一些。

Answer 2

我创建了两个 classes d-flex 和 gap10，并在您的 CSS.
中将图像预览的高度调整为 90px 然后我在 

上方的 html div 中添加了那 2 classes

.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 中删除 class。为了兼容性，检查 this.

如何使两个 Div 相互对齐？

how to can align a two Divs with each others?

html

css

frontend

responsive-design