CSS佈局問題使用的div

我想有使用以下頁面佈局的頁面時，CSS佈局問題使用的div

當有內rightContent內容時，兩個div應該是彼此相鄰。 rightContent內沒有內容時，leftContent應爲全寬。

這可能嗎？

<div id="container" style="width: 1100px; border:1px solid #000000;"> 

     <div id="leftContent" style="float: left; width:100%;" >    
      lkasdjfal sfjalsfj asfj asldfjaslfja sfjdlkdjasdlkf asdfasldfjas fjaslfd jasldfj alsdjfalsdf  
     </div>  
     <div id="rightContent" style="float: right;">   
      lkasdjfal sfjalsfj asfj asldfjaslfja sfjdlkdjasdlkf asdfasldfjas fjaslfd jasldfj    
     </div> 

    </div>

來源

2011-05-04 gotsp

你的意思是隻有CSS？通過JS或服務器端lang很容易完成 – JohnP 2011-05-04 07:27:57

@JohnP - 問題是如果只存在一個css答案，否則我想我會使用一些jQuery。 – gotsp 2011-05-04 07:30:56

只需在leftContent div中放置正確的內容div，應該可以爲您尋找效果。 http://jsfiddle.net/5ubTe/85/

來源

2011-05-04 08:19:48

好的解決方案，但爲了這個工作，'div＃rightContent'需要在'＃leftContent' div中的文本之上。 – Nick 2011-05-04 09:11:04

向左列添加大量文本，並且這些框不再彼此相鄰... – gotsp 2011-05-04 10:38:02

當你知道右列將是空的，或者你只是想假定該頁面的單列布局時，我建議你動態地向body標籤添加一個'single'類。這將讓你隱藏與CSS右列中，像這樣：

#rightColumn{ 
    width:50%; 
    float:right; 
} 

#leftColumn{ 
    width:50%; 
    float:left; 
} 

body.single #rightColumn{ 
    display:none; 
} 

body.single #leftColumn{ 
    width:100%; 
    float:none; 
}

然後，只需改變你的<body>標籤上，你想使用單個列布局的頁面閱讀<body class="single">，右列將隱藏在這些頁面上，無論它是否包含內容，而無需對HTML進行任何其他更改或使用JavaScript進行操作。

來源

2011-05-04 08:53:42 Nick

CSS佈局問題使用的div

回答

相關問題