我在图片中展示了我想要实现的效果。
容器 div 的宽度可能会有所变化。子元素之间以及子元素与左右两侧之间应该有统一的间距。
我注意到边距会合并。我不确定是否有一种方法可以说“最小边距”,或者是否有一种方法可以说“分散开来”。
幸运的是,总会有 6 个子元素。(或者 n,但是它将被固定)
在这种情况下,我正在使用 bootstrap。我将调查行/列功能。但我不想依赖它。我更愿意找到一种适用于非 bootstrap 项目的方法,因为那将是我学习的更可移植的技术。
有没有一种方法可以在不引入布局结构的情况下实现这一点?换句话说,是否有一种仅基于规则的解决方案?
.phase .float-right {
float: right;
}
.phase .image-carousel {
display: table-cell;
vertical-align:middle;
height: 175px;
width: 900px;
border: 1px solid red;
background-color: orange;
}
.phase .image-carousel .circle {
position: relative;
float: left;
top: calc(0.5vh + 20px);
height: 40px;
width: 50px;
border-radius: 50%;
background-color: white;
padding-top: 10px;
}
.arrow-left {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 26.0px 15px 0;
border-color: transparent #000000 transparent transparent;
margin-left: 10px;
}
.arrow-right {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #000000;
margin-left: 15px;
}
.phase .image-carousel .thumbnail {
float: left;
top: calc(0.5vh - 100px);
width: 100px;
height: 100px;
border: 2px solid #ddd;
background-color: black;
}
<div class="phase angular-animate" ng-class="color($index)" ng-repeat="phase in phases">
<div class="float-right">
<div class="image-carousel">
<div class="circle">
<div class="arrow-left"></div>
</div>
<div class="thumbnail">
<img src="http://dummyimage.com/100/green.png" />
</div>
<span class="thumbnail">
<img src="http://dummyimage.com/100/green.png" />
</span>
<span class="thumbnail">
<img src="http://dummyimage.com/100/green.png" />
</span>
<span class="thumbnail">
<img src="http://dummyimage.com/100/green.png" />
</span>
<div class="circle">
<div class="arrow-right"></div>
</div>
</div>
</div>
</div>
text-align:center;
。 - codetalker