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

由 发布于

我不知道该怎么做。

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

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