how to can align a two Divs with each others?-CodePudding

I am trying to make a multiple image upload with preview but on a design problem as you see on the code snipped. The problem is that the add image div doesn't get aligned with the images. hope you can help me find the issue.

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" >
    <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 >
        <!--GALLERY AREA TEST WITH 1 IMAGE-->
        <div  >
            <div >

                <!--UPLOAD BUTTON-->
                <div >
                    <label for="images-upload" >
                        <i  style=" transform: translateY( 31%);"></i>
                    </label>     
                    <input id="images-upload" type="file" name="images" multiple="multiple">
                </div> 

                <!--IMAGES PREVIEW-->
                
                <div >
                    <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt=""  >
                    <button > <i ></i></button>
                </div> 
                <div >
                    <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt=""  >
                    <button > <i ></i></button>
                </div> 
                
                
            </div>
        </div>
    </div>

</html>

CodePudding user response：

You can add display:flex after the div with class p-3:

<div style="display:flex;">

As you defined class images-preview's height as 80px, the button-container div will sightly bigger as its height set as 90px.

CodePudding user response：

I created two classes d-flex and gap10, and adjusted the height of images-preview to 90px in your CSS.
Then I added those 2 classes in your html div above 

.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" >
  <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 >
    <!--GALLERY AREA TEST WITH 1 IMAGE-->
    <div >
      <div >

        <!--UPLOAD BUTTON-->
        <div >
          <label for="images-upload" >
                        <i  style=" transform: translateY( 31%);"></i>
                    </label>
          <input id="images-upload" type="file" name="images" multiple="multiple">
        </div>

        <!--IMAGES PREVIEW-->

        <div >
          <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" >
          <button > <i ></i></button>
        </div>
        <div >
          <img src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg" alt="" >
          <button > <i ></i></button>
        </div>


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

</html>

You shouldn't use inline styling such as style="display:flex;", because it can really mess up things in the long run. If you want to get rid of the gap, just delete the class from HTML & CSS. For compatibility, check this.