0

我有这个代码：

http://jsfiddle.net/dtjmsy/8BDRj/

<div class="row-fluid">
    <div class="span2">
        <img src="http://autooccasion76.files.wordpress.com/2010/11/clio_rs1.gif" class="img-polaroid">
    </div>
    <div class="span1">
        <span class="labelColorBlue">Statut:</span>
    </div>
    <div class="span2">
        <INPUT type="Text" value="Valeur" name="TxtBox">              
    </div>

    <div class="clearfix"></div>

    <div class="span2 offset2" style="background-color: blue">...</div>

</div>​

我有一个图像，一个标签，一个文本框和一个蓝色矩形，都是 span2，我想要得到的是

蓝盒放置在图像左侧，标签和文本框下方

我尝试了 clearfix 或 offset 类，它们都将我的蓝色矩形放在图像下方，我怎样才能将它放置在标签和文本框的高度下方以及图片的右侧，无论其高度如何？

干杯

4

1 回答 1

2

网格被设计成垂直堆叠行，水平堆叠列。您必须根据这些原则考虑您的布局。

如果我理解正确，您应该使用两列：一列用于图像，另一列用于其余部分。第二列将分为两行：标签+输入和蓝色条。

演示（jsfiddle）

<div class="row-fluid">
    <div class="span2">
        <img src="..." class="img-polaroid">
    </div>
    <div class="span3">
        <div class="row-fluid">
            <div class="span4">
                <span class="labelColorBlue">Statut:</span>
            </div>
            <div class="span8">
                <INPUT type="Text" value="Valeur" name="TxtBox" />              
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12" style="background-color: blue">...</div>
        </div>
    </div>
</div>

小心输入，因为它有自己的宽度，应该覆盖它以适应列，就像那样（jsfiddle）：<INPUT class="span12" ... />

请记住，每次创建后代时，流体网格都有 12 列（想想 %）。如果您有疑问，请查看流体网格嵌套文档。

于 2012-11-07T23:03:32.740 回答