7

我正在使用 twitter bootstrap 将 2 个 div 并排放置。每个 div 里面都有中大图像，使用 jquery isotope排列。问题是当一个 div 中没有足够的图像时，div 的宽度保持不变并且还有很多额外的空间。像这样 ： 在此处输入图像描述

我希望 div 居中对齐并减小宽度以适应其中的图像。像这样： 在此处输入图像描述

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

其他样式是引导的。

4

2 回答 2

1

我也将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>

在每个 div 中，我个人使用JsRender来渲染模板，但是你应该有引导布局，在每个.item

于 2012-12-13T12:55:47.743 回答
1

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

1) 在 main 上设置相等的左右边距container。

2）将Section1中的同位素设置为从右到左。我的网站并不是真正的阿拉伯语网站，但我主要使用图片，所以没有问题。

此外，删除所有部分的固定宽度规范。让容器上的边距和引导程序的流体设计负责中心优化设计。

于 2013-05-02T10:19:09.547 回答