色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么我的div圖標(biāo)不在我的其他div上？

CSS

我有3張卡片，它們顯示關(guān)于遷移、刪除或存檔的內(nèi)容網(wǎng)站的信息。對(duì)于已存檔和已刪除的卡片，圖標(biāo)2位于信息分區(qū)的頂部，但對(duì)于已遷移的卡片，圖標(biāo)2被向下推，不會(huì)位于頂部，因此它被推離卡片的底部。為什么會(huì)這樣，盡管在我眼里他們都是一樣的。我知道我的遷移卡里有3個(gè)李，但這沒關(guān)系。

<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>

發(fā)生了什么事

我希望遷移后的圖標(biāo)像其他圖標(biāo)一樣放在info div的頂部。

實(shí)際問題是卡元素由于額外的li而溢出。

解決辦法

使用flex布局，我只是將li和title包裝在一個(gè)名為Info-content的div中，并為Info元素添加display:inline-flex規(guī)則。

李必須總是在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"  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>