0

嘿伙计们，我正在使用波旁威士忌。我在这里进退两难，因为我必须将徽标放在页面底部，或者可能高于底部 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; }
4

1 回答 1

0

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

.introBar{
  position: relative;
}

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

.introLogo{
  bottom: 20%;
  position: absolute;
  width: 100%;
}
于 2014-04-22T03:46:14.053 回答