如何停止堆疊在彼此之上的圖像

Question

我使用angularjs來遍歷一系列圖像，並且它們都顯示在彼此的頂部。

.modifier-list-icon { 
 
     left: 5px; 
 
     position: absolute; 
 
     top: auto; 
 
    } 
 

 
    .icon-small { 
 
     height: 20px; 
 
     width: 20px; 
 
    }

<span ng-if="list.images" ng-repeat="image in list.images"> 
 
    <img ng-src="{{image.url}}" alt="Icon" 
 
     class="icon-small modifier-list-icon"/> 
 
</span>

這是圖像如何看起來像從上面的代碼。

我改變位置以position: relative; ^^

我想兩個圖像的像第二截圖彼此相鄰顯示，但我想被放置在圖像像第一個截圖一樣左邊。

Answer 1

刪除position: absolute和position relative，適用display: inline-block

Answer 2

我傾向於更喜歡這類東西Flexbox的解決方案。我重複錄入一次，所以你可以看到更短的標籤將如何導致右側萎縮，但所有的嵌套元素的停留位置：

.container { 
 
    border: 1px solid black; 
 
    /* 
 
    by using display flex, we let the child containers use as much 
 
    width as they need, and we can keep their text-alignment separate 
 
    */ 
 
    display: flex; 
 
} 
 

 
.icon-container, 
 
.label-container { 
 
    /* 
 
    flex grow is set to 1 and flex-basis to auto so that the child elements 
 
    will stretch to use all the available horizontal space. 
 
    one or the other could be dropped here 
 
    */ 
 
    flex: 1 1 auto; 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
} 
 

 
.icon-container>*, 
 
.label-container>* { 
 
    border: 1px solid black; 
 
} 
 

 
.label-container { 
 
    /* 
 
    creating the white space between the left-side icons and 
 
    right-side label/icon is just a matter of having 
 
    text-alignments 
 
    */ 
 
    text-align: right; 
 
}

<div class="container" ng-if="list.images" ng-repeat="image in list.images"> 
 
    <div class="icon-container"> 
 
    <img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" /> 
 
    <img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" /> 
 
    </div> 
 

 
    <div class="label-container"> 
 
    <span>some text very long text on the right side</span> 
 
    <img alt="another icon" /> 
 
    </div> 
 
</div> 
 

 
<div class="container" ng-if="list.images" ng-repeat="image in list.images"> 
 
    <div class="icon-container"> 
 
    <img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" /> 
 
    <img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" /> 
 
    </div> 
 

 
    <div class="label-container"> 
 
    <span>another entry</span> 
 
    <img alt="another icon" /> 
 
    </div> 
 
</div>

Answer 3

希望下面的代碼示例將解決你的問題。如果還有其他情況，請告訴我。

body { 
 
\t font: 16px "Roboto", Arial, sans-serif; 
 
} 
 
.block { 
 
\t padding: 10px; 
 
\t margin: 0 0 20px; 
 
} 
 
.block h3 { 
 
\t font-size: 18px; 
 
\t font-weight: bold; 
 
\t margin: 0 0 10px; 
 
} 
 
ul{ 
 
    margin:0; 
 
    padding:0; 
 
    list-style:none; 
 
} 
 
li { 
 
\t display: table; 
 
\t width: 100%; 
 
\t margin: 0 0 10px; 
 
\t padding: 10px 15px; 
 
\t border: 1px solid #ccc; 
 
\t border-radius: 3px; 
 
\t box-sizing: border-box; 
 
} 
 
.actions { 
 
\t display: table-cell; 
 
\t white-space: nowrap; 
 
} 
 
.actions img { 
 
\t margin-left: 10px; 
 
} 
 
.actions img:first-child { 
 
\t margin-left: 0; 
 
} 
 
.title { 
 
\t display: table-cell; 
 
\t padding: 0 30px 0 10px; 
 
\t text-align: right; 
 
\t position: relative; 
 
\t vertical-align: middle; 
 
} 
 
.title img { 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
} 
 
.list2 li { 
 
\t display: flex; 
 
} 
 
.list2 .title { 
 
\t white-space: nowrap; 
 
\t overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
\t flex: 1; 
 
}

<div class="block"> 
 
<h3>List with wrap title</h3> 
 
<ul> 
 
    <li> 
 
    <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div> 
 
    <div class="title"><span>Small Title</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div> 
 
    </li> 
 
    <li> 
 
    <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div> 
 
    <div class="title"><span>Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div> 
 
    </li> 
 
    <li> 
 
    <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" 
 
    width="20"></div> 
 
    <div class="title"><span>Long Title with multiple action</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div> 
 
    </li> 
 
    <ul> 
 
</div> 
 
<div class="block"> 
 
<h3>List with truncate title </h3> 
 
<ul class="list2"> 
 
    <li> 
 
    <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div> 
 
    <div class="title">Small Title<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div> 
 
    </li> 
 
    <li> 
 
    <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div> 
 
    <div class="title">Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div> 
 
    </li> 
 
    <li> 
 
    <div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" 
 
    width="20"></div> 
 
    <div class="title">Long Title with multiple action<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div> 
 
    </li> 
 
    <ul>