Question

嘿伙计们我正在使用波旁威士忌。我在这里处于两难境地，因为我必须将徽标放在页面底部或者可能位于底部20％以上。我有这个蓝色的行，跨越全宽容器的3.5列。现在在该行内，我插入了一个徽标列，并覆盖了嵌套的所有12列。 如何将12列嵌套到外排底部的徽标列。

给予徽标行绝对或固定可以将行从容器中分开并传播整个屏幕。

enter image description here

这是我的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>

和heres是生成的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; }

Answer 1

请下次使用jsfiddle来显示您的代码，以便我们更快地给您快速回答。关于您的问题，请尝试将css属性 position：relative 添加到 .introBar css规则中，以便您拥有：

.introBar{
  position: relative;
}

然后，你可以将你的 .introLogo 绝对定位于 .introBar 。

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

将列定位在行的底部

1 个答案: