Wie man Bilder davon abhält übereinander zu stapeln

Question

Ich benutze angularjs um eine Reihe von Bildern zu durchlaufen und sie werden alle übereinander angezeigt.

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

dies ist, wie die Bilder von oben mit dem Code aussehen.

änderte ich die Position position: relative; ^^

ich beide Bilder wollen nebeneinander wie in der zweiten Screenshot angezeigt werden, aber ich möchte die Bilder platziert werden nach links wie der erste Screenshot.

Answer 1

Entfernen position: absolute und position relative gelten display: inline-block

Answer 2

Ich neige dazu, eine Flexbox Lösung für diese Art von Dingen zu bevorzugen. Ich wiederholte einmal den Eintrag, so können Sie sehen, wie kürzere Etiketten werden auf der rechten Seite führen zu schrumpfen, aber alle verschachtelten Elemente bleiben positioniert:

.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

Hoffnung unten Codebeispiel wird Ihr Problem lösen . Wenn es eine andere Bedingung gibt, lass es mich wissen.

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>