CSS高度調節一些DIV

#ArticlesPane 
 
{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    margin-top: 25px; 
 
    overflow: auto; 
 
    /*background-color: #4F2412;*/ 
 
    /*border: 5px solid yellow;*/ 
 
    /*clear: both;*/ 
 
    border-top-left-radius: 35px;  
 
    line-height: 25px; 
 
} 
 

 
#ArticlesPane > div /* select direct children */ 
 
{ 
 
    display: inline-block;  
 
    height: 100%; /* This is used to spread background color */ 
 
    float: right; 
 
    font-size: 12px; 
 
} 
 

 
.ArticlesTitle 
 
{ 
 
    background-color: #C9A798; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 

 
.ArticlesList 
 
{ 
 
    padding: 15px; 
 
} 
 

 
#pos1.GroupedArticles, #pos2.GroupedArticles 
 
{ 
 
    /*width: 34%;*/ 
 
    width: 50%; 
 
} 
 

 
#pos1.GroupedArticles 
 
{ 
 
    background-color: #828E8C; 
 
} 
 

 
#pos2.GroupedArticles 
 
{ 
 
    background-color: cornsilk; 
 
}

<div id="ArticlesPane"> 
 
    <div class="GroupedArticles" id="pos1">  
 
    <div class="ArticlesTitle">Latest posts 1</div> 
 
    <div class="ArticlesList"> 
 
     <a href="">title</a><br /> 
 
     <span>Some Text</span> 
 
     <a href="">title</a><br /> 
 
     <span>Some Text</span> 
 
     <a href="">title</a><br /> 
 
     <span>Some Text</span> 
 
     <a href="">title</a><br /> 
 
     <span>Some Text</span> 
 
     ... 
 
     <hr> 
 
    </div> 
 
    </div> 
 
    <div class="GroupedArticles" id="pos2"> 
 
    <div class="ArticlesTitle">Latest posts 2</div> 
 
    <div class="ArticlesList"> 
 
     <!-- same as above (with any number of items in it) --> 
 
    </div> 
 
    </div> 
 
</div>

我試圖建立一個兩欄佈局，其中每列都含有一些文章（標題和每篇文章的摘要）。問題在於身高。我試圖以適合所有框內容的方式設置高度，並且放大後，我將無法獲得該框的滾動條，或者文本不會消失。另外我想設置向下的背景色（填充ArticlesPane的高度）。使用我自己的代碼，文本可以直接使用。我怎樣才能讓文本與文本一起成長，而不會搞亂佈局。

來源

2015-08-03 Stack crawler

我的事情該鏈接http://jsfiddle.net/rajeshkhatri13/APJ3e/對您有所幫助 –

@TMDinesh這是使用jQuery和這個問題沒有jquery的標籤。你知道其他的CSS方法嗎？ –

http://codepen.io/mariemosley/pen/de1e021d39f7ab2a4236bfbd4aad6c1f即時通訊不知道它的工作或不嘗試這 –

body 
{ 
    overflow: hidden; 
} 

#pos1.GroupedArticles 
{ 
    background-color: cornsilk; 
    float:left; 
    display:inline-block; 
} 

#pos2.GroupedArticles 
{ 
    background-color: #828E8C; 
    float:left; 
    display:inline-block; 
} 
.ArticlesList 
{ 
    padding: 15px; 
    text-align: right; 
}

來源

2015-08-05 05:21:46

溢出：隱藏將剪輯的內容，而不是我在找什麼。 –

CSS高度調節一些DIV

回答

相關問題