css 如何使两个Div相互对齐？

elcex8rz 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(231)

我试图使多个图像上传预览，但在一个设计问题，你看到的代码剪。问题是，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;

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

css

来源：https://stackoverflow.com/questions/70507622/how-to-can-align-a-two-divs-with-each-others

2条答案

按热度按时间

whlutmcx1#

您可以使用类p-3在div之后添加display:flex：
<div class="p-3" style="display:flex;">
由于您将类images-preview的高度定义为80px，因此button-container div的高度设置为90px时会稍大一些。

赞(0）回复(0）举报 2022-12-15

lh80um4z2#

我创建了两个类d-flex和gap10，并将CSS中images-preview的高度调整为90 px。
然后，我将这两个类添加到上方的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;
}

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

赞(0）回复(0）举报 2022-12-15

我来回答

css 如何使两个Div相互对齐？

2条答案

相关问题

热门标签

最新问答