在C＃中使用Singleton(Using Singleton in C#)

 我想我找到了答案 ： 
 
 通过使heading具有position:absolute; ，我可以强迫它留在item div里面，防止它移动到它下面。 所以我更新的css（带有实际的class名和制作材料）看起来像; 
 
.flight {
    height: 400px;
    position: relative;

}

.flight-img {
    background: red;
    background-size: cover;
    width: 40%;
    height: 400px;
    float: left;
    position: relative;

    /* CSS Animation Effects */
    transition: width 0.5s ease;

}


.flight-heading {
    width: 60%;
    float: left;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    transition: width 0.5s ease;
}

/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
    float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
    left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
    float: right;
}

/* Adding hover effects for desktop */

.flight:hover .flight-img {
    width: 100%;
}

.flight:hover .flight-heading {
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    transform: translateY(50%);
    background: rgba(0,0,0,0.75);
    color: #fff;

    h2 {
        color: #fff;
    }
}
 
 而我的HTML看起来像： 
 
<div id="flights">
    <div class="flight">
        <div class="flight-img"></div>
        <div class="flight-heading">
            <h2>Shared Flights</h2>
            <p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
            <button>Book Now</button>
        </div>
    </div>
    <div class="clear"></div>

</div><!-- End Flights -->
 
 用JSFiddle来展示。 我知道动画需要工作，但我认为现在将divs放在一个地方很容易。 

I think I found the answer:
 
by making heading have position:absolute;, I can have it forced to stay inside of the item div, keeping it from moving below it. So my updated css (with actual class names and production stuff) looks like;
 
.flight {
    height: 400px;
    position: relative;

}

.flight-img {
    background: red;
    background-size: cover;
    width: 40%;
    height: 400px;
    float: left;
    position: relative;

    /* CSS Animation Effects */
    transition: width 0.5s ease;

}


.flight-heading {
    width: 60%;
    float: left;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    transition: width 0.5s ease;
}

/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
    float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
    left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
    float: right;
}

/* Adding hover effects for desktop */

.flight:hover .flight-img {
    width: 100%;
}

.flight:hover .flight-heading {
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    transform: translateY(50%);
    background: rgba(0,0,0,0.75);
    color: #fff;

    h2 {
        color: #fff;
    }
}
 
while my html looks like:
 
<div id="flights">
    <div class="flight">
        <div class="flight-img"></div>
        <div class="flight-heading">
            <h2>Shared Flights</h2>
            <p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
            <button>Book Now</button>
        </div>
    </div>
    <div class="clear"></div>

</div><!-- End Flights -->
 
with a JSFiddle to show. I know the animation needs work, but I figure making it smooth will be easy now that the divs stay in one place.