I am using twitter bootstrap to make 2 divs placed side-by-side. Each div has medium and large images inside it, arranged using jquery **isotope**.
The problem is that when there are not enough images in a div, the div width remains same and there's a lot of extra space left. Like this :
![enter image description here][1]
I want the divs to align centrally and also reduce in width to fit the images inside it. Like this:
![enter image description here][2]
My HTML code is this :
Section1
Section2
My CSS looks like this :
#section1 .small{
width:150px;
height:200px;
overflow:hidden;
}
#section1 .big{
width:320px;
height:420px;
overflow:hidden;
}
#section2 .small{
width:80px;
height:100px;
overflow:hidden;
}
#section2 .big{
width:170px;
height:220px;
overflow:hidden;
}
Other styles are bootstrap's.
[1]: http://i.stack.imgur.com/YEBzA.png
[2]: http://i.stack.imgur.com/XZ7uC.png Why is the width set for these classes? Have you tried max-width?
以上就是Resize bootstrap div to fit content的详细内容，更多请关注web前端其它相关文章！
