如何讓div內的固定高度的div

<style type="text/css"> 
#displayHeader { 
img { 
width: 100%; 
max-width: 100%; 
max-height: 100%; 
} 
.header-img-inner { 
max-height:100%; 
} 
} 
</style> 


<div id="displayHeader" style="height: 83.03px;"> 
<div class="header-inner"> 
<div class="row"> 
<div id="headerCol0" class="col-xs-4 text-center header-img-wrapper"> 
<div class="header-img-inner"> 
<img src="test.svg"> 
<p>TEST</p> 
</div> 
</div> 
<div id="headerCol1" class="col-xs-4 text-center header-img-wrapper"> 
<div class="header-img-inner"> 
<img src="test.svg"> 
</div> 
     </div> 
     <div id="headerCol2" class="col-xs-4 text-center header-img-wrapper"> 
      <div class="header-img-inner"> 
       <img src="test.svg"> 
       <p>tt</p> 
      </div> 
     </div> 

             </div> 

          </div> 
         </div> 
          <div id="displayContent" style="height: 264.8px;"> 
           <div class="inner">   
</div> 
<div> 
</div> 
<div> 
</div> 
<div>

圖片和文字走出div塊，爲什麼會發生這種情況？如何讓div內的固定高度的div

沒有左浮動，右用。它不適用於職位：相對於父母和絕對位置的孩子，但仍然不能很好地工作。

我只設置用於圖像最大高度當我設置在在標題-IMG-內

來源

2016-10-03 user2235768

你試過'溢出：hidden'？ – Tijmen

你能否提供一個你想要實現的圖形？從你的帖子很難分辨出來。你是否試圖在圖片上疊加文字？另外，你的CSS不是CSS，除非它是LESS/SASS。 – hungerstar

爲什麼不使用位置：繼承;，以使圖像和任何你想要在div內繼承位置。這可能會有所幫助，請嘗試一下。

來源

2016-10-03 15:55:26

你想要這樣的東西嗎？

.block { 
    text-align: center; 
    background: #c0c0c0; 
    border: #a0a0a0 solid 1px; 
    margin: 20px; 
} 

.block:before { 
    content: '\200B'; 
/* content: ''; 
    margin-left: -0.25em; */ 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

.centered { 
    display:inline-block; 
    vertical-align: middle; 
    width: 300px; 
    padding: 10px 15px; 
    border: #a0a0a0 solid 1px; 
    background: #f5f5f5; 
}

<div class="block" style="height: 300px;"> 

    <div class="centered"> 
     <h1>Some Text</h1> 
     <img src="Untitled-2.jpg" height="150px"> 
    </div> 
</div>

請檢查此鏈接： - https://css-tricks.com/centering-in-the-unknown/

來源

2016-10-03 16:04:19

如何讓div內的固定高度的div

回答

相關問題