其他影像消失在另一個下-有解無憂

當我試圖讓這兩個影像出現在同一行時，它們會相互折疊，其中一個消失在另一個之下。我用桌子和沒有桌子都試過了，但我做不到。基本上我想做的就像一個照片庫影像將出現在一行中。

.glass {
  font-size: larger;
  padding: 25px;
  position: absolute;
  top: 15%;
  left: 10%;
  text-align: center;
  word-wrap: break-word;
  width: 10%;
  letter-spacing: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<table>
  <tr>
    <div class="glass">
      <div class="gallery">
        <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
        <div class="desc">Sicilian Pizza 15$</div>
      </div>
    </div>
  </tr>
  <tr>
    <div class="glass">
      <div class="gallery">
        <img src="https://images.unsplash.com/photo-1613564834361-9436948817d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=743&q=80" alt="">
        <div class="desc">Classic Pizza 15$</div>
      </div>
    </div>
  </tr>
</table>

uj5u.com熱心網友回復：

考慮到您設定的各種尺寸和定位規則，我不完全確定您的想法，但這里有一個猜測。消除表格（無論如何都缺少單元格元素），將容器設定為inline-block，消除絕對定位和浮動，并將位置更改為邊距。

.glass {
  display: inline-block;
  box-sizing: border-box;
  font-size: larger;
  padding: 25px;
  margin-top: 5%;
  margin-left: 5%;
  text-align: center;
  word-wrap: break-word;
  letter-spacing: 5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  max-width: 100px;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

<div class="glass">
  <div class="gallery">
    <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
    <div class="desc">Sicilian Pizza 15$</div>
  </div>
</div>

<div class="glass">
  <div class="gallery">
    <img src="https://images.unsplash.com/photo-1613564834361-9436948817d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=743&q=80" alt="">
    <div class="desc">Classic Pizza 15$</div>
  </div>
</div>

uj5u.com熱心網友回復：

一種簡單的方法是使用flexbox或CSS Grid。以下是您想要（我認為）使用 Grid 的概述：

*{
  box-sizing:border-box;
  margin:0;
}

.galleries{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:2rem;
}

.gallery {
  padding: 25px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.gallery:hover {
  border: 1px solid #777;
}

img{
  width:100%;
  height:200px;
  object-fit:cover;
}

<div class="galleries">

  <div class="gallery">
    <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
    <div class="desc">Sicilian Pizza 15$</div>
  </div>
  <div class="gallery">
    <img src="https://images.unsplash.com/photo-1594007654729-407eedc4be65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=728&q=80" alt="">
    <div class="desc">Sicilian Pizza 15$</div>
  </div>
</div>

uj5u.com熱心網友回復：

因為你在使用position: absolute我修復了它，但我不知道你打算用模糊做什么，所以我將它添加為疊加影片。

.container{
  position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.gallery{
  position:relative;
}
.glass{
  transition:1s ease;
    height:100%;
    width:100%;
    font-size: larger;
    position: absolute;
    text-align: center;
    word-wrap: break-word;
    letter-spacing: 5px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}
  
div.gallery:hover {
    border: 1px solid #777;
}
  
div.gallery img {
    width: 100%;
    height: auto;
}
  
div.desc {
padding: 15px;
text-align: center;
}
.glass-holder:hover .glass{
  width:0%
}

<div class="container">
  
        <div  class="glass-holder">
            <div class="gallery">
               <div class="glass" > </div>
                <img src="https://placekitten.com/640/360" alt="">
                <div class="desc">Sicilian Pizza 15$</div>
            </div>
        </div>
    
        <div  class="glass-holder">
            <div class="gallery">
              <div class="glass" > </div>
                <img src="https://placekitten.com/640/360" alt="">
                <div class="desc">Classic Pizza 15$</div>
            </div>
        </div>
    
</div>

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

標籤：html css

上一篇：為什么垂直對齊屬性不起作用？[復制]

下一篇：如何簡化這些CSS選擇器？