如何阻止图像堆叠在一起
我使用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; ^^
我希望两个图像像第二个屏幕截图一样显示在彼此旁边，但我希望图像像第一个屏幕截图一样放在左侧。
3 个答案:
答案 0 :(得分：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>
答案 1 :(得分：0)
删除
"dependencies": {
"autobind-decorator": "^2.1.0",
"cheerio-without-node-native": "^0.20.2",
"diacritic": "0.0.2",
"expect": "^1.20.2",
"harmony-proxy": "^1.0.1",
"hoist-non-react-statics": "^2.3.1",
"immutable": "^3.8.1",
"lodash": "^4.17.4",
"lodash-es": "^4.17.4",
"lodash.debounce": "^4.0.8",
"lodash.memoize": "^4.1.2",
"lodash.mergewith": "^4.6.0",
"lodash.sorteduniq": "^4.2.0",
"lodash.sorteduniqby": "^4.7.0",
"lodash.union": "^4.6.0",
"lodash.unionwith": "^4.6.0",
"lodash.uniqby": "^4.7.0",
"mime-types": "^2.1.17",
"moment": "^2.18.1",
"normalizr": "^3.2.3",
"normalizr-immutable": "0.0.4-beta12",
"path": "^0.12.7",
"react": "16.0.0-alpha.12",
"react-immutable-proptypes": "^2.1.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.6.0",
"react-native": "^0.49.3",
"react-native-action-button": "^2.7.2",
"react-native-animatable": "^1.2.3",
"react-native-autolink": "^1.1.1",
"react-native-code-push": "5.1.3-beta",
"react-native-cookies": "^3.2.0",
"react-native-deprecated-custom-components": "^0.1.1",
"react-native-drawer": "^2.3.0",
"react-native-fetch-blob": "^0.10.8",
"react-native-fs": "^2.5.2",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-image-crop-picker": "^0.17.2",
"react-native-image-picker": "^0.26.7",
"react-native-immutable-list-view": "^0.6.2",
"react-native-invertible-scroll-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "0.3.0",
"react-native-keychain": "2.0.0-rc",
"react-native-lightbox": "^0.7.0",
"react-native-linear-gradient": "^2.3.0",
"react-native-material-kit": "^0.4.1",
"react-native-modalbox": "^1.4.1",
"react-native-parallax-scroll-view": "^0.19.0",
"react-native-photo-view": "^1.5.2",
"react-native-popup-menu": "^0.8.0",
"react-native-progress": "^3.3.0",
"react-native-scrollable-tab-view": "^0.6.7",
"react-native-sglistview": "^0.4.3",
"react-native-share": "^1.0.23",
"react-native-store": "^0.4.1",
"react-native-swiper": "^1.5.12",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "1.0.0-beta.13",
"react-redux": "^5.0.5",
"react-swipeable-views": "^0.12.5",
"react-swipeable-views-native": "^0.12.5",
"realm": "^1.13.0",
"redux": "^3.7.2",
"redux-form": "^7.0.3",
"redux-logger": "^3.0.6",
"redux-middleware-oneshot": "^0.1.1",
"redux-persist": "^4.8.2",
"redux-persist-immutable": "^4.3.0",
"redux-persist-transform-immutable": "^4.3.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"route-parser": "0.0.5",
"webstomp-client": "^1.0.8"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-plugin-module-resolver": "3.0.0-beta.5",
"babel-plugin-react-intl": "^2.3.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-register": "^6.24.1",
"chai": "^4.1.0",
"chai-as-promised": "^7.1.1",
"chai-enzyme": "^0.8.0",
"chai-immutable": "^1.6.0",
"commitizen": "^2.9.6",
"cz-conventional-changelog": "^2.0.0",
"enzyme": "^3.0.0",
"eslint": "^4.7.2",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"expect.js": "^0.3.1",
"flow": "^0.2.3",
"flow-bin": "^0.56.0",
"immutablediff": "^0.4.3",
"jest": "^21.2.1",
"jest-serializer-enzyme": "^1.0.0",
"jshint": "^2.9.5",
"mocha": "^3.4.2",
"react-addons-test-utils": "^15.6.2",
"react-dom": "16.0.0-beta.5",
"react-intl-cra": "^0.2.8",
"react-native-mock": "^0.3.1",
"react-test-renderer": "^16.0.0",
"redux-debounce": "^1.0.1",
"redux-debounced": "^0.4.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-mock-store": "^1.2.3",
"remote-redux-devtools": "^0.5.12",
"sinon": "^4.0.0",
"why-did-you-update": "0.0.8"
}
和position: absolute，应用position relative
答案 2 :(得分：0)
Hope below code example will solve your problem. If there is any other condition, please let me know.
body {
font: 16px "Roboto", Arial, sans-serif;
}
.block {
padding: 10px;
margin: 0 0 20px;
}
.block h3 {
font-size: 18px;
font-weight: bold;
margin: 0 0 10px;
}
ul{
margin:0;
padding:0;
list-style:none;
}
li {
display: table;
width: 100%;
margin: 0 0 10px;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.actions {
display: table-cell;
white-space: nowrap;
}
.actions img {
margin-left: 10px;
}
.actions img:first-child {
margin-left: 0;
}
.title {
display: table-cell;
padding: 0 30px 0 10px;
text-align: right;
position: relative;
vertical-align: middle;
}
.title img {
position: absolute;
right: 0;
top: 0;
}
.list2 li {
display: flex;
}
.list2 .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
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>- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？