图像如何在一个div中位于上一行的顶部

时间:2016-02-24 14:07:42

标签: html css

我正在处理页脚。在右侧向下 - 图像附加 - 我有一个响应"订阅"按钮。enter image description here有一个普通行的潜水。这个一般行包含两个不同的行。 第一行包括两个网格:col-lg-4 / col-lg-8(白色背景) 第二个包括三个网格:col-lg-4 / col-lg-4 / col-lg-4(黑色背景) 我想将图像放在第一行的第二行中,该网格位于第一行最右边网格的顶部。 问题是虽然图像放在第二行但它出现在第一行!我想将其更正为模式enter image description here

<div class="container-fluid p0 hidden-xs  hidden-sm" style="border: solid yellow">
  <div class="row">
    <div class="col-lg-12 col-md-12 ">
      <div class="row pb+ pt+ footer-border ">
        <div class="col-lg-12 col-md-12">
          <div class="container">
            <!-- brand starts -->
            <div class="col-lg-4 col-md-4 hidden-xs  pl0">
               <a href="/">
                   <i class=" icon-famousLogo icon-color famous-large "></i>
               </a>
            </div>
            <!-- brand ends -->

             <!-- Social Sharing Start -->
            <div class="col-lg-8  col-md-8 hidden-xs   clearfix">
              <div class="col-lg-5 col-md-5 col-offset-7 pt-">
                <ul class="list-inline float-r">
                  <li>
                    <span class="follow-us pr">FOLLOW US</span>
                  </li>
                  <li>
                    <a href="https://www.facebook.com/famousmagazine">
                      <i class=" icon-facebook icon-color facebook pr "></i>
                    </a>
                  </li>
                  <li>
                    <a href="https://twitter.com/famousweekly ">
                      <i class=" icon-twitter icon-color twitt pr"></i>
                    </a>
                  </li>
                  <li>
                    <a href="https://www.instagram.com/famousweekly/ ">
                      <i class=" icon-instagram icon-color instagram"></i>
                    </a>
                  </li>
                    <!-- They are supposed to be add later after getting the right URL-->
              <!--<li >
                    <a  href="https://www.youtube.com">
                      <i class=" icon-youtube icon-color youtube"></i>
                    </a>
                  </li>
                  <li >
                    <a href="https://www.instagram.com" >
                      <i class=" icon-Pintrest icon-color pint"></i>
                    </a>
                  </li>
                  <li >
                    <a href="https:https://twitter.com" >
                      <i class=" icon-tumblr icon-color twitt"></i>
                    </a>
                  </li> -->
                  <!-- Hidden Social Sharing Ends-->
                </ul>
              </div>
            </div>
             <!-- Social Sharing Ends -->
          </div>
        </div>
      </div>
       <!-- Second Row  / Footer Lists Starts -->
      <div class="row  hidden-xs  hidden-sm">
        <div class="col-lg-12 col-md-12 ">
            <div class="bottomMenu-parent" >
              <div class="container">
                <div class="col-lg-4 col-md-4 pl0 pt+ pb+" >
                  <table class="footer-table">
                    <tr>
                      <td><a href="#">ABOUT US</a></td>
                      <td class="pl++"><a href="#">CoNTACT US</a></td>
                    <tr>
                      <td><a href="#">TERMS AND CONDITIONS</a></td>
                      <td class="pl++"><a href="#">ADVERTISE</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">PRIVACY POLICY</a></td>
                    </tr>
                  </table>
                </div> 
                <!-- Sign up Starts -->
                <div class="col-lg-4 col-md-4">
                </div>     
                <!--Sign Up Ends  -->
                <div class="col-lg-4 col-md-4">
                   <figure class="p pb0 footer-image">
                      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPZA23BVynjg91p0lXTn2yEiCft5VkK70063kgELaL_77gtH_TWg">
                  </figure>
                  <a href="#" class="subscribe-button" >
                    <button type="button" >
                      SUBSCRIBE <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> 
                    </button>
                  </a> 
                </div>
              </div>
            </div>
        </div>
      </div>
       <!-- Second Row / Footer List  Ends -->
    </div>
  </div>       
</div>

@media(min-width: @screen-sm-min) {

    .follow-us{
        color:@mainpink;
        .font-family(@font-Oswald-Bold) ;
        font-size: 12px;
    }
    .footer-border{
        border: 1px solid @mainpink;
    }

    .footer-table{
        color:@white !important;
        text-align: left;
        tr{
            td{
                padding-bottom:10px;
                a{
                    .font-family(@font-SourceSansPro-Regular) !important;
                    color:@white !important;
                    text-transform: uppercase;
                    font-size:14px;
                }
            }
        }
    }

    .footer-image{
        position: absolute;
        bottom: 0px;
        display: block;
        width: 100%;
        text-align: center;
    }

}

1 个答案:

答案 0 :(得分:0)

我已经更改了以下代码,然后就可以了:

.footer-image
{
     margin-top: -100px;
     bottom: 0px;
     display: block;
     width: 100%;
     text-align: center;
     padding-bottom:0px;
}