Question

 <div class="container col-lg-12 col-sm-12">

      <div class="row">
        <div class="col-lg-6 clear-L-R">
             <div class="fix">
            <img src="http://lorempixel.com/640/400/nature" class="img-responsive clear-L-R center-block" alt="">

                <div class=" caption caption-text">
                    <h1>Amazing Caption</h1>
                    <p>Whatever It Is - Always Awesome</p>
                </div>
          </div>
        </div>

        <div class="col-sm-12 col-lg-6 clear-L-R">
            <div class="fix">
            <img src="http://lorempixel.com/640/400/nature" class="img-responsive center-block" alt="">

                <div class="caption caption-text">
                    <h1>Amazing Caption</h1>
                    <p>Whatever It Is - Always Awesome</p>
                </div>
            </div>
        </div>

<style>


body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    




.caption{
    cursor: pointer;
    position: absolute;
    top:0;
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,0.65);
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
    left:0;   /** new  **/
    right:0;  /** new  **/
}
.caption:hover{
    opacity: 1;
}
.caption-text h1{
    text-transform: uppercase;
    font-size: 24px;
}
.caption-text{
    color: #fff;
    text-align: center;
}    

</style>

http://velnikolic.com/ToddNew/

标题应该只取.fix div的宽度，但是它从col-lg-6 div获取它的值不能找出原因。例如，向下滚动到图库。试图在这里关注一个例子，但是在对代码进行三重检查之后，它仍然会这样做。

Answer 1

.fix

中缺少

位置样式

.fix {
position:relative;
}

<强>解释

position: absolute Div将与最近的父position: relative

相对应

为什么赢得div最接近父母的宽度？

1 个答案: