将列定位在行的底部答案

【问题标题】：positioning a column at the bottom of a row将列定位在行的底部
【发布时间】：2014-04-22 03:26:58
【问题描述】：

大家好，我正在使用纯波本威士忌。我在这里进退两难，因为我必须将徽标放置在页面底部，或者可能高于底部 20%。我有这个跨越全宽容器的 3.5 列的蓝色行。现在在该行内，我插入了一个徽标列，并让它覆盖了所有嵌套的 12 列。 如何获取嵌套在外行底部的 12 列的徽标列。

将徽标行位置设置为绝对或固定会从外部容器中断开行并遍布整个屏幕。

这是我的html代码

<body>
<div class="introContainer">

    <!-- Intro Deck -->
    <div class="introBar">

        <div class="introLogo">
            <img src="img/badge.png" height="156" width="156" alt="">

        </div>
    </div>

</div>

这是生成的css

  * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0; }
  body img {
    max-width: 100%;
    height: auto; }

.introContainer {
  *zoom: 1;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
  position: fixed;
  background-image: url("../img/coverBg.jpg");
  background-size: cover;
  background-position: 50%; }
  .introContainer:before, .introContainer:after {
    content: " ";
    display: table; }
  .introContainer:after {
    clear: both; }
  .introContainer .introBar {
    background-color: rgba(42, 196, 234, 0.9);
    float: left;
    display: block;
    margin-right: 0%;
    width: 29.16667%;
    height: 100%; }
    .introContainer .introBar:last-child {
      margin-right: 0; }
  .introContainer .introLogo {
    float: left;
    display: block;
    margin-right: 0%;
    width: 100%;
    border: 3px solid green;
    bottom: 22px; }
    .introContainer .introLogo:last-child {
      margin-right: 0; }

【问题讨论】：

标签： html css responsive-design bourbon neat

【解决方案1】：

请，下次请使用jsfiddle 显示您的代码，以便我们更轻松地为您提供快速答复。关于您的问题，请尝试将 css 属性 position: relative 添加到您的 .introBar css 规则中，这样您将拥有：

.introBar{
  position: relative;
}

然后，您可以将您的 .introLogo 绝对定位到 .introBar。

.introLogo{
  bottom: 20%;
  position: absolute;
  width: 100%;
}

【讨论】：

谢谢。嘿，请告诉我可以使用带有框架的小提琴，因为我必须链接所有外部 js 和 css 对吗？
我认为 Jsfiddle 是为了展示快速的东西，所以你可以用尽可能少的代码来实现你想要实现的“轻量级”版本。关于您的问题，是的，如果您愿意，它可以选择链接外部资源（css、js）。