父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