css 为什么我的div图标不会覆盖其他div？

pod7payv 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(139)

我有3张卡片，它们显示有关迁移，删除或存档的内容网站的信息。对于存档和删除的卡，Icon2位于信息div的顶部，但对于迁移的卡，它被向下推，不会位于顶部，因此它被推离卡的底部。为什么在我眼里他们都是一样的。我知道我有3里的迁移卡，但这应该没有关系。

<content id="template">

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css"
    integrity="sha384-IIED/eyOkM6ihtOiQsX2zizxFBphgnv1zbe1bKA+njdFzkr6cDNy16jfIKWu4FNH"           >
  <style>
        #Container {
          width: 1200px;
          /*border: 1px solid gold;*/
          padding: 5px;
          display: grid;
          grid-template-columns: 2fr 2fr 2fr;
        }
    
        .Card {
            border: 2px solid gray;
            margin: 10px;
            height: 150px;
            transition: all .2s ease-in-out;
        }
    
        .Card:hover {
            transform: scale(1.05);
            border: 2px solid #6583ff ;
        }
    
        .Card:hover .Info {
            border-left: 2px solid #6583ff;
        }
    
        .Card.Arc 
            { background-color: #c6e2e9;
            }

      .Card.Mig 
          { background-color: #f1ffc4;
          }
      .Card.Del 
          { background-color: #ffcaaf;
          }
    
      .Icon {
          text-align: center;
          font-size: 3.5rem;
          display: inline-block;
          width:25%;
          height:75px;
          /*border: 1px solid red;*/
          margin: 5px;
          margin-top: 35px;
      }
    
      .Icon2 {
          font-size: 2rem;
          float: right;
          border: 1px solid red;
        position: relative;
      }
    
      .Info {
          word-wrap: break-word;
            font-size: 0.8rem;
            display: Inline-block;
            width: 63%;
            height:90%;
            border: 1px solid green;
            margin: 5px;
            padding-left: 10px;
            border-left: 2px solid gray;
            vertical-align: top;
        }
     
  </style>
    <div id="Container">
        {{#each . as |item|}}
            {{#if _A}}
                <div class="Card Arc">
                    <div class="Icon"><i class="fal fa-archive" style="color: #4d4d4d;"></i></div>
                        <div class="Info">{{Title}} - Archived
                        <li>Path to old site: {{Site_x0020_Address}}</li>
                        <li>Primary Contact: {{Site_x0020_Owners}}</li>
                        <div class="Icon2"><i class="fal fa-file-alt" style="color: #949494;"></i>    </div>
                </div>
            </div>
        {{/if}}
        {{#if _M}}
            <div class="Card Mig">
                <div class="Icon"><i class="far fa-cloud-upload" style="color: #4d4d4d;"></i></div>
                <div class="Info">{{Title}} - Migrated
                    <li>Path to old site: {{Site_x0020_Address}}</li>
                    <li>New Location: {{SPOnline_x0020_Site_x0020_Addres}}</li>
                    <li>Primary Contact: {{Site_x0020_Owners}}</li>
                    <div class="Icon2"><i class="fas fa-share" style="color: #949494;"></i></div>
                </div>
            </div>
        {{/if}}
        {{#if _D}}
            <div class="Card Del">
                <div class="Icon"><i class="fal fa-trash-alt" style="color: #4d4d4d;"></i></div>
                <div class="Info">{{Title}} - Deleted
                    <li>Path to old site: {{Site_x0020_Address}}</li>
                    <li>Primary Contact: {{Site_x0020_Owners}}</li>
                    <div class="Icon2"><i class="fal fa-envelope" style="color: #949494;"></i></div>
                </div>
            </div>
        {{/if}}
    {{/each}}
</div>

What is happening
我想迁移的图标去的信息div顶部一样，他们的休息。

css

来源：https://stackoverflow.com/questions/76252800/why-wont-my-div-icon-go-over-my-other-div

1条答案

按热度按时间

2ekbmq321#

实际的问题是Card元素由于额外的li而溢出。

解决方案

使用flex布局，我只是将li和title Package 在名为Info-content的div中，并为Info元素添加display:inline-flex规则。
li必须始终位于ul或ol内

#Container {
  width: 1200px;
  /*border: 1px solid gold;*/
  padding: 5px;
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
}

.Card {
    border: 2px solid gray;
    margin: 10px;
    height: 150px;
    transition: all .2s ease-in-out;
    padding:5px;/* add this */
}

.Card:hover {
    transform: scale(1.05);
    border: 2px solid #6583ff ;
}

.Card:hover .Info {
    border-left: 2px solid #6583ff;
}

.Card.Arc 
    { background-color: #c6e2e9;
    }

.Card.Mig 
  { background-color: #f1ffc4;
  }
.Card.Del 
  { background-color: #ffcaaf;
  }

.Icon {
  text-align: center;
  font-size: 3.5rem;
  display: inline-block;
  width:25%;
  height:75px;
  /*border: 1px solid red;*/
  margin: 5px;
  margin-top: 35px;
}

.Icon2 {
  font-size: 2rem;
  align-self: end;
  /*float: right;*/
  border: 1px solid red;
 /*position: relative;*/
}

.Info {
  word-wrap: break-word;
    font-size: 0.8rem;
    display: inline-flex;/* change this */
    width: 63%;
    height:100%;/* change this */
    border: 1px solid green;
    /*margin: 5px;*/
    padding-left: 10px;
    border-left: 2px solid gray;
    vertical-align: top;
}

.Info-content{
  flex: 0 0 85%;
  max-width: 88%;
  overflow-x: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="Container">
            <div class="Card Mig">
                <div class="Icon"><i class="fa fa-cloud-upload" style="color: #4d4d4d;"></i></div>
                <div class="Info">
                    <div class='Info-content'>
                       <span>{{Title}} - Migrated</span>
                   <ul>
                     <li>Path to old site: {{Site_x0020_Address}}</li>
                    <li>New Location: {{SPOnline_x0020_Site_x0020_Addres}}</li>
                    <li>Primary Contact: {{Site_x0020_Owners}}</li>
                   </ul>
                    </div>
                    <div class="Icon2"><i class="fas fa-share" style="color: #949494;"></i></div>
                </div>
            </div>
                        <div class="Card Mig">
                <div class="Icon"><i class="fa fa-cloud-upload" style="color: #4d4d4d;"></i></div>
                <div class="Info">
                <div class='Info-content'>
                    <span>{{Title}} - Migrated</span>
                    <ul>
                       <li>Path to old site: {{Site_x0020_Address}}</li>
                    <li>New Location: {{SPOnline_x0020_Site_x0020_Addres}}</li>
                    <li>Primary Contact: {{Site_x0020_Owners}}</li>
                    </ul>
                </div>
                    <div class="Icon2"><i class="fas fa-share" style="color: #949494;"></i></div>
                </div>
            </div>
  <div class="Card Arc">
                    <div class="Icon"><i class="fa fa-archive" style="color: #4d4d4d;"></i></div>
                        <div class="Info">
                         <div class='Info-content'>
                            <span>{{Title}} - Archived</span>
                        <ul>
                          <li>Path to old site: {{Site_x0020_Address}}</li>
                        <li>Primary Contact: {{Site_x0020_Owners}}</li>
                        </ul>
                         </div>
                        <div class="Icon2"><i class="fa fa-file-alt" style="color: #949494;"></i>    </div>
                </div>
            </div>

            <div class="Card Del">
                <div class="Icon"><i class="fa fa-trash-alt" style="color: #4d4d4d;"></i></div>
                <div class="Info">
               <div class='Info-content'>
                   <span>{{Title}} - Deleted</span>
                    <ul>
                      <li>Path to old site: {{Site_x0020_Address}}</li>
                    <li>Primary Contact: {{Site_x0020_Owners}}</li>
                    </ul>
               </div>
                    <div class="Icon2"><i class="fa fa-envelope" style="color: #949494;"></i></div>
                </div>
            </div>

</div>

赞(0）回复(0）举报 2023-05-19

我来回答

css 为什么我的div图标不会覆盖其他div？

1条答案

相关问题

热门标签

最新问答