调整引导区div以适合内容

我正在使用twitter bootstrap使2个div并排放置。每个div里面都有大中图片，用jquery 同位素排列。问题是，当div中没有足够的图像时，div宽度保持不变，并且还有很多额外的空间。像这样： enter image description here 调整引导区div以适合内容

我想divs居中对齐，也减少宽度，以适应其中的图像。就像这样： enter image description here

我的HTML代码是这样的：

<div id="container" class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="legend span8">Section1</div> 
     <div class="legend span4">Section2</div> 
    </div> 
    <div class="row-fluid"> 
     <div id="section1" class="span8"> 
      <div class="small"><img src="images/1.jpg" /></div> 
      <div class="small"><img src="images/2.jpg" /></div> 
      <div class="big"><img src="images/3.jpg" /></div> 
     </div> 
     <div id="section2" class="span4"> 
      <div class="small"><img src="images/1.jpg" /></div> 
      <div class="small"><img src="images/2.jpg" /></div> 
      <div class="big"><img src="images/3.jpg" /></div> 
     </div> 
    </div> 
</div>

我的CSS是这样的：

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

其他款式引导的。

来源

2012-12-13 soundswaste

为什么要为这些类设置宽度？你尝试过最大宽度吗？ –

我完全忘记了我所问过的这个问题。我通过以下方式解决了上述情况：

1）在主container上设置相等的左侧和右侧页边空白。

2）将第1部分的同位素设置为right-to-left。我的确不是一个阿拉伯语网站，但我使用的图像大多没有问题。

此外，删除所有部分的固定宽度规格。让容器边缘和自举流体设计考虑到中心优化设计。

来源

2013-05-02 10:19:09 soundswaste

我也使用bootstrap与isotope，但我首先要做的是确保width和height尊重我自己的设计。

只是改变你使用的，通常我最终使用

.width2，.width3，.width4，.width8和.height2，.height4

然后，请确保您的container具有正确的尺寸，并适用于同位素。

之后，所有您的设计将被设置并与您的尺寸正确下降。

顺便说一下，你应该结束了有这样的事情：

<div id="container"> 
    <div class="weather item width2 height8" data-id="1"></div> 
    <div class="country item width2 height4" data-id="2"></div> 
    <div class="country item width2 height4" data-id="3"></div> 
    <div class="country item width2 height4" data-id="4"></div> 
    <div class="country item width2 height4" data-id="5"></div> 
</div>

每个格内，我个人使用JsRender呈现模板，但是你应该有引导的布局，每个.item

内

来源

2012-12-13 12:55:47 balexandre

调整引导区div以适合内容

回答

相关问题