Question

我一直在努力解决这个问题，所以任何帮助都会受到赞赏。

我使用网格演示将文本块放在背景图像上。顶部的图像需要与页脚中的图像对齐，但目前它不对齐。

可以在此codepen中看到完整标记，但这是显示问题的相关部分http://codepen.io/jbchurchill/pen/NGrRJg

<div class="image">
<div class="row">
<div class="incolumn column-3">Welcome to the
<h4>Austin - The depths of hell</h4>
</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-3">Lorem Ipsum Dominus fobiscum add some spirit 220. Won't you eat my sleazy pancackes just like saintly Alphonso. The quick red fox jumped over the lazy brown dog. <!-- Ocean on the east and bisected by the Chesapeake Bay, one of the world’s great estuaries. -->  </div>
<div class="incolumn column-3 invisible">&nbsp;</div>
<div class="incolumn column-6">As a result Hell  boasts a hot steamy sauna of lava longer than the state of California. We also have some rare historical areas, such as and purgatory and limbo, that provide hours of laughter for the dark angel Satan. We can often be found lounging with our friends by the lava pool drinking Ale and Mead. We find that those are the best drinks for driving away demons. To demonstrate the bankrupt richness that can be found in urban cities, we point you to Austin Texas. Our diversity offers some of the best camaraderie on the sister planett!!</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-5 invisible">&nbsp;</div>
<div class="incolumn column-7">To use this dungeon guide, start by selecting a scullion and explore the various clusters of mining sites. <span style="color: yellow">Changing The length of this content affects the size of the gap! Try it yourself and see. It is totally weird (like Austin). I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not I kid you not</span></div>
</div>
<!-- row --><!--
<div class="row"><div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<p>-->
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row --><div class="row">
<div class="incolumn column-12 invisible">&nbsp;</div>
</div>
<!-- row -->

这是来自Drupal 7的输出html和css，它解释了一些无关的标记。这也是为什么页脚不容易成为＆＃34;图像的一部分＆＃34;格。

接下来是相关的CSS

    /*------------------------------*\
    Grid System
\*------------------------------*/

.row, 
.incolumn {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.incolumn {
    position: relative;
    float: left;
}

.incolumn + .incolumn {
    margin-left: 1.6%;
}

.column-1 {
    width: 6.86666666667%;
}

.column-2 {
    width: 15.3333333333%;
}

.column-3 {
    width: 23.8%;
}

.column-4 {
    width: 32.2666666667%;
}

.column-5 {
    width: 40.7333333333%;
}

.column-6 {
    width: 49.2%;
}

.column-7 {
    width: 57.6666666667%;
}

.column-8 {
    width: 66.1333333333%;
}

.column-9 {
    width: 74.6%;
}

.column-10 {
    width: 83.0666666667%;
}

.column-11 {
    width: 91.5333333333%;
}

.column-12 {
    width: 100%;
    margin-left: 0;
}

@media only screen and (max-width: 550px) {
    .column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        width: auto;
        float: none;
    }

    .incolumn + .incolumn {
        margin-left: 0;
    }
}

/*------------------------------*\
  IMAGE STYLES
\*------------------------------*/
.incolumn {
    background: #1471E3;
    border: none; 1px solid #ccc;
    border-radius: 4px;
    color: #222;
    padding-top: 5px;
    min-height: 30px;
    text-align: center;
}

/* fixes small odd-colored area on the left side of the front page */
div#main.clearfix {
   background: #1471E3;
}
/*
div.field-items {
  max-height: 540px;
}
*/
.invisible {
  /* background-color: blue; */
  border: none;
  opacity: 0;
}  

.row {
    margin-bottom: 10px;
}

.row:last-child {
    margin-bottom: 0;
}

.incolumn .column {
    color: #eee;
    background: background-color: #1471E3;
    border: none;
    /* border-color: #000; */
}
/************
Image Class w/ Osprey background
and footer
************/
.node {
  margin-bottom: 0;
  padding: 0;
}
.image {
  position: relative;
  background-image: url('../images/Guide_09.gif');
  background-repeat: no-repeat;
  background-color: #1471E3;
  max-width: 900px;
  max-height: 540px;
  background-size: 100%;
  background-origin: bottom left;
}
#front-footer {
  max-height: 35px;
  min-height: 35px; /* prevents footer image from disappearing! */
  max-width: 900px;
  background-size: 100%;
  background-image: url('../images/Guide_10.gif');
  background-repeat: no-repeat;
}
div.content, 
.node.node-page,
 {
  padding: 0 important!;
  margin: 0;
  border-width: 0;
}
div.region.region-content {
  padding-left: 0;
  margin-left: 0;
}
@media only screen and (max-width: 550px) {
    .row {
        margin-bottom: 0;
    }
    .incolumn {
        margin-bottom: 10px;
    }
    .row:last-child .incolumn:last-child {
        margin-bottom: 0;
    }
} /* end media query */

@media only screen and (max-width: 790px) {
  .image, #front-footer {
    background-image: none;
    background-color: #1471E3;
  }
} /* end media query */

如何使用CSS将这两个图像切片对齐

0 个答案: