文本失控的div容器

。這是我想要的東西 -
1格應該有最低高度100％，使其邊框顯示全屏
2.應該在中間水平。
3.它應該與內部的內容拉伸。
文本失控的div容器

現在的問題是這些所有3件事情正在工作，但在最後「你好」正在從容器中走出。我已經使用清晰的浮動。但它不起作用。幫我拿出一些CSS技巧。或者指出我是否做錯了什麼。
這裏的jsfiddle鏈接 - http://jsfiddle.net/2U5hh/

這是我的HTML代碼 -

<body> 
    <table class="clearfix"> 
    <tr height="15%"> 
    <td id="image_td"> 
     <img src="img/smthing.png" alt="E-Learn" /> 
    </td> 
    </tr> 
    <tr height="85%"> 
    <td> 
     <div id="td_content_div">       
     <p>hello</p><p>hello</p><p>hello</p><p>hello</p> 
     <p>hello</p><p>hello</p><p>hello</p><p>hello</p> 
     <p>hello</p><p>hello</p><p>hello</p><p>hello</p> 
     <p>hello</p><p>hello</p><p>hello</p><p>hello</p> 
     </div> 
    </td> 
    </tr> 
</table> 
</body>

，這裏是CSS代碼 -

html, body 
{ 
height:100%; 
width:100%; 
margin:0 0 0 0; 
} 

.clearfix { 
max-width: 500px; 
margin: 2% auto; 
border-radius:25px; 
padding:2% 2% 5% 2%; 
height:96%; 
width:96%; 
box-shadow: 0 0 3px rgba(83, 39, 134, 1); 
} 



#image_td{ 
float: right; 
margin-right: 5%; 
margin-top: 2%; 
} 

#image_td img{ 
max-width:96%; 
height:auto; 
} 

#td_content_div { 
position:relative; 
border-radius:25px; 
box-shadow: 0 0 3px rgba(83, 39, 134, 1); 
width:94%; 
height: 94%; 
margin:3% 3% 1% 3%; 
vertical-align: middle; 
}

來源

2014-03-05 riskPlayGround

你想要這樣的東西嗎？ http://jsfiddle.net/Pzz22/ – 2014-03-05 21:03:42

是的，我想要裏面的文字。但是當我們在裏面放置一些更多的「p」標籤時，它會變得更外面。 – riskPlayGround

http://jsfiddle.net/Pzz22/2/而這個？ – 2014-03-05 21:10:09

我不確定你想要什麼，但如果你只是想讓最後一個p留在容器中，我所做的只是將#td_content_div的高度改爲100％，它似乎工作。您可能能夠完全刪除該ID上的高度聲明，但似乎並未尊重段落的邊距。這可能是取決於情況的理想效果。

來源

2014-03-05 21:17:23 TorranceScott

你的解決方案working.i確定高度爲100％現在這就是我想要的。 http://jsfiddle.net/Pzz22/6/ http://jsfiddle.net/Pzz22/7/它的工作很好now.thnx – riskPlayGround

添加height:auto;到#td_content_div

來源

2014-03-05 21:11:40 Mark

這是當我使用auto.http：//jsfiddle.net/Pzz22/4/時發生的事情，我希望容器獲得全屏幕高度。 – riskPlayGround

#td_content_div { 
position:relative; 
border-radius:25px; 
box-shadow: 0 0 3px rgba(83, 39, 134, 1); 
width:94%; 
height: 94%; 
margin:3% 3% 1% 3%; 
vertical-align: middle; 
height:auto; 
} 

p { margin-left:20px; }

http://jsfiddle.net/Pzz22/3/

來源

2014-03-05 21:14:10

這是我使用auto時會發生的情況。 jsfiddle.net/Pzz22/4我希望該容器獲得全屏幕高度。 – riskPlayGround

http://jsfiddle.net/Pzz22/8/我給元素添加了最小高度。 – 2014-03-05 21:28:38

是的，但你設置它與固定的像素，我不希望這個因爲我讓我的網頁響應。 thnx求助。它已經解決了。我將#td_content_div更改爲100％。現在它沒有離開容器。 – riskPlayGround

你需要把高度：汽車和溢出：汽車這樣的：

#td_content_div { 
position:relative; 
border-radius:25px; 
box-shadow: 0 0 3px rgba(83, 39, 134, 1); 
width:94%; 
margin:3% 3% 1% 3%; 
vertical-align: middle; 

height: auto; 
overflow:auto 
}

如果你將只設置高度：汽車，將有超過圓角一些醜陋的內容。乾杯!

來源

2014-03-05 21:17:31

文本失控的div容器

回答

相關問題