我有下面两个问题的代码:
大图未居中。我希望小图像(拇指)保持左对齐。
min-width
上的 class th
像max-width
一样,而真实的max-width
没关系。
我想要的是th
不会比min-width
小,即使大图较小。
如果有很多拇指,也不要超过max-width
。拇指应波纹管。
在此示例中,我使用像素,但也许使用rem,%以避免在较小的屏幕上出现问题。
.content {
display: flex;
flex-direction: row;
border: 1px solid red;
}
.th {
display: flex;
align-items: flex-start;
flex-direction: column;
margin: 0 30px 0 0;
min-width: 30%;
max-width: 60%;
border: 1px solid blue;
}
.cimage img{
padding:10px;
max-height: 200px;
max-width: 200px;
}
.thumbs {
display: flex;
justify-content: flex-start;
}
.thumb {
margin: 5px 5px 0 0;
}
<div class="content">
<div class="th" >
<div class="items" >
<div class="item">
<div class="cimage"><img src="https://via.placeholder.com/200"/></div>
</div>
</div>
<div class="thumbs">
<div class="thumb"><img src="https://via.placeholder.com/50"/></div>
<div class="thumb"><img src="https://via.placeholder.com/50"/></div>
<div class="thumb"><img src="https://via.placeholder.com/50"/></div>
<div class="thumb"><img src="https://via.placeholder.com/50"/></div>
<div class="thumb"><img src="https://via.placeholder.com/50"/></div>
<div class="thumb"><img src="https://via.placeholder.com/50"/></div>
</div>
</div>
<div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publish
</div>