使用Bootstrap網格系統的文本和圖像對齊

Question

這裏是一個div的圖片，我試圖使用左對齊的文本和右對齊的圖像。圖像必須是從上到下（即綠色容器的高度的100％）。我想讓div的高度可以調整到內容。 （更多的內容，更多的高度）。 但是，圖像應始終位於合適高度的右上方。 問題是，我的文本是在圖像下進行的，並沒有遵循對齊的位置，直到圖像存在，然後應該在圖像下方（跨越整個屏幕/綠色div或文本包裝，因爲我們稱之爲）並且在圖像結束後正常對齊。

請幫忙。

<div class="gtco-container-fluid" style="background- color:#00a652; height: auto;"> 

     <div class="row animate-box"> 

     <div class="gtco-container"> 

      <div class="col-md-7"> 
       <h2 style="color:white;font-weight: bold;padding-top:20px;">The heading</h2> 
       <p style="color:white;font-weight:bold;font-size:20px;">hhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       </p> 
       <p style="color:white;font-weight:bold;font-size:20px;"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
        </p> 


      </div> 
     </div> 
       <img src="images/default.jpg"; width="600px"maxheight="600px;" style="position:absolute;right:0px;padding-left: 25px;"> 

     </div> 

    </div> 

CSS：

.gtco-container { 
    max-width: 1140px; 
    position: relative; 
    margin: 0 auto; 
    padding-left: 15px; 
    padding-right: 15px; 
    } 

Answer 1

請使用

p { 
    word-break: break-all; 
} 

或

<p style="color:white;font-weight:bold;font-size:20px;word-break: break-all;"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
       hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
        </p> 

這裏是展示相同的codepen鏈接https://codepen.io/team/css-tricks/pen/avavBY

Answer 2

所有的內聯樣式讓我失明。這應該工作：

<style> 
    * { word-break: break-all; } 
</style> 

<div class="gtco-container-fluid"> 
    <div class="row animate-box"> 
     <div class="gtco-container"> 
      <div class="col-md-7"> 
       <h2>The heading</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nullam commodo pharetra urna sit amet interdum. Donec 
        efficitur urna quis arcu tincidunt, ut vehicula augue 
        rhoncus. Proin metus velit, dictum vitae libero sed, 
        condimentum faucibus mi. Fusce rutrum lorem id metus 
        varius congue. Nunc sagittis lacus nec blandit ultricies. 
        Duis mattis justo ac dictum bibendum. Nulla molestie 
        tellus vitae lectus bibendum, cursus varius lectus 
        consequat. Etiam placerat dignissim arcu, quis lacinia 
        quam tincidunt in. In quis tellus eu turpis varius 
        imperdiet ut in turpis. Vestibulum id lobortis turpis. 
        Quisque leo nisl, vulputate eu mi ut, luctus scelerisque 
        massa. Suspendisse potenti. Nulla id sodales ligula. 
        Vestibulum ante ipsum primis in faucibus orci luctus et 
        ultrices posuere cubilia Curae.</p> 
      </div> 
      <div class="col-md-5"> 
       <img src="images/default.jpg" width='100%'height='100%' /> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

的形象是你的文字下面，因爲在瀏覽器解釋了「HHHHHH ......」，作爲一個單一的詞，但它不知道如何打破它，所以它不。

@Lalit Sachdeva的答案是確定的，但它不會工作在Firefox（至少codepen例子並不在我的最新的Firefox）和IE11的工作方式不同https://gist.github.com/argyleink/5463021

當測試佈局，應該嘗試使用lorem ipsum或者更好的是真實的文本，它有長短單詞的組合......你可以去你最喜歡的新聞網站，並從隨機文章中複製一些文本。