Parent Div 小于包含在其中的子元素

Question

我有一个容器（称为 #thumbs），在这 4 个子容器中（.preview），其中有 2 个内嵌显示的图像。

我正在尝试在.preview 周围设置边框。但是，该容器比图像本身短，我无法弄清楚如何使它们具有相同的高度。

请在这里查看我的小提琴http://jsfiddle.net/jayden/7Uy2v/

 #thumbs .preview {
    width: auto;
    display: inline;
    padding: 0;
    margin: 14px;
    border:2px solid red;
}

#thumbs .preview img {
    height:100px;
}   

<div id="thumbs">
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
</div>
   

请注意，图片只是这个问题的临时占位符，因为图片名称是由我们的系统动态生成的。

非常感谢！

Answer 1

更改为 display:inline-block 而不是 display:inline

 #thumbs .preview {
    width: auto;
    display: inline-block; /* Change */
    padding: 0;
    margin: 14px;
    border:2px solid red;
}

#thumbs .preview img {
    height:100px;
}   

<div id="thumbs">
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
    <div class="preview">
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
        <img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
    </div>
</div>
   

Fiddle