Question

我的页面顶部有一个徽标。高约250px。接下来我想让三个文本字段在底部对齐（与图像一起）。这些字段代表英语，法语和德语的缩写，用于翻译目的。

我正在使用完整的bootstrap.css并添加了两行（在帖子中消化：align text/image/links within a grid 但仍无法使其正常工作。

.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:absolute; bottom:0; }

ENG和FRA的额外css行

.bottomaligned2 {position:static; bottom:0; }

HTML代码为：

<body>
<div class="container">
    <div class="row fixedheight">
        <div class="span3 offset4">
            <img src="./images/logo.jpg" alt="Logo">
        </div><!-- /span -->
        <div class="span1 bottomaligned">
            NED
        </div><!-- /span -->
        <div class="span1 bottomaligned2">
            ENG
        </div><!-- /span -->
        <div class="span1 bottomaligned2">
            FRA
        </div><!-- /span -->
    </div><!-- /row -->
</div><!-- /container -->
</body>

有人能指出我正确的方向来完成这项工作吗？谢谢，
格特

Answer 1

经过一些实验和@DaveP的暗示，终于找到了解决方案。

新的CSS代码：

.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:relative; top:80%; height:10em; margin-top:-5em}

无需选择position:absolute，因为Twitter Bootstrap中的div可以解决这个问题。

HTML：

<body>
<div class="container">
    <div class="row fixedheight">
        <div class="span3 offset4">
            <img src="./images/logo.jpg" alt="Logo">
        </div><!-- /span -->
        <div class="bottomaligned">
        <div class="span1">
            ENG                          
        </div><!-- /span -->
        <div class="span1">
            NED
        </div><!-- /span -->
        <div class="span1">
            FRA
        </div><!-- /span -->
        </div>
    </div><!-- /row -->
</div><!-- /container -->
</body>

这个现在给我一个从第5列开始的图像，文本在图像的右侧几乎底部对齐。

Twitter Bootstrap：底部对齐图像旁边的文本

1 个答案: