两列图像,宽度不同。首先是固定的,其次应缩小到剩余宽度

我不知道该怎么做。

到目前为止,我所拥有的是第一列

float: left
width: 400px

但是第二列将无法容纳剩余的空间,无论它们周围是否有包装纸,包装纸是否具有“宽度:100%”,图片是否有照片或我尝试过的任何其他组合。一旦减小了浏览器的宽度,第二列就跳到第一列的末尾,不再并排显示。结合第二列的图像也应居中且不应大于其自然宽度这一事实,我不知道该怎么办。我在网上找到的所有解决方案都没有图像示例。

html(烧瓶)代码:

<div class="gallery">
    <div class="thumbnail-container">
        {% for thumb in gallery.thumbs %}
        <img class="thumb" src="{{thumb}}">
        {% endfor %}
    </div>
    <div class="fullsize-container">
        {% for full in gallery.full %}
        <img class="full" src="{{full}}">
        {% endfor %}
    </div>
</div>

我想要的图片(两列都应可独立滚动):

enter image description here

评论
  • et_ea
    et_ea 回复

    我建议您使用flexbox或grid而不是float。这是有关flex如何实现所需目标的示例。添加此CSS并检查:

    .gallery{
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      flex-wrap: wrap;
    }
    
    .thumbnail-container{
      flex-basis: 20%;
    }
    
    .fullsize-container{
      flex-basis: 80%;
    }