2

我的页面顶部有一个徽标。它的高度约为 250 像素。在此旁边，我想让三个文本字段底部对齐（与图像）。这些字段代表英语、法语和德语的缩写，用于翻译目的。

我正在使用完整的 bootstrap.css 并添加了两行（如帖子中所建议的：在网格中对齐文本/图像/链接，但仍然无法使其正常工作。

.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>

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

4

1 回答 1

2

经过一些实验和@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 列开始的图像，其中文本几乎底部对齐在图像的右侧。

于 2012-07-02T20:05:23.270 回答