如何將兩個Div相互對齊？-有解無憂

我正在嘗試使用預覽上傳多張圖片，但正如您在代碼剪斷中看到的那樣，存在設計問題。問題是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>

uj5u.com熱心網友回復：

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

<div style="display:flex;">

當您將 classimages-preview的高度定義為 80px 時，button-containerdiv 的高度設定為 90px 時會稍微大一些。

uj5u.com熱心網友回復：

我創建了兩個類d-flex和gap10，并在 CSS 中將影像預覽的高度調整為 90 像素。
然后我在上面的 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 中洗掉該類即可。為了兼容性，請檢查這個。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395744.html

標籤：html css 响应式设计前端

上一篇：通過用滑鼠向下移動并將其傳遞到彩色部分，將顏色更改為粘性元素

下一篇：不旋轉文本的CSS微調器