父Div小于其中包含的子元素

Question

我有一个容器(称为#thumbs),在4个子容器(.preview)内,其中2个图像是内联显示的.

我试图在边界附近.preview.但是,该容器比图像本身短,我无法弄清楚如何使它们具有相同的高度.

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

HTML:

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

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

CSS:

<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;
}   

小提琴