簡體   English   中英

如何使1個縮略圖的高度等於2個相鄰的div

[英]How to make 1 thumbnails height equal to the 2 adjacent divs

我有3個帶有文本的引導程序縮略圖。 縮略圖中的2個位於屏幕寬度的左側50%,第3個位於右側50%。 第3個應該是彼此堆疊的2個左側縮略圖的高度。

我無法獲得我的第3個div,它占據了屏幕右側的50%來拉伸屏幕的整個高度或什至是左側div的高度。

無論如何要這樣做?

這是我的代碼

<body>
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-12 col-lg-offset-0">                 
            <!-- Contact with Map - START -->
            <div class="row">
                <div class="col-md-6 col-lg-6">
                    <div class="col-md-12 col-lg-12">
                        <div class="thumbnail thumbnail-Green">
                            <div>
                                    <h5>
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                        Green Green Green Green Green Green Green Green Green Green Green Green Green Green 
                                    </h5>
                            </div>
                        </div>
                    </div><!--END:  row div-->
                    <div class="col-md-12 col-lg-12">
                        <div class="thumbnail thumbnail-Red">
                            <div>
                                    <h5>
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                       Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red Red 
                                    </h5>
                            </div>
                        </div>
                    </div><!--END:  row div-->
                </div><!--END: address col div-->
                <div class="col-md-12 col-lg-6">
                    <div class="col-md-12 col-lg-12">
                       <div class="thumbnail thumbnail-Blue">
                            <div>
                                    <h5>
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                        Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue Blue
                                    </h5>
                            </div>
                        </div>
                    </div><!--END:  row div-->
                </div><!--END: address col div-->
            </div><!--END: address col div-->
        </div><!--END: controlscol div-->
    </div><!--END: controls row div-->
</body>

您是否正在尋找這樣的東西?

.stretch-to-viewport
    height: 100vh

這將使您的div始終可以拉伸到“屏幕”(視口)的高度。 vh代表視口高度。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM