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>

你的意思是只有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/

好的解决方案，但为了这个工作，'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进行操作。

CSS布局问题使用的div

相关推荐