A 3栏的CSS解决方案在首页的整个宽度扩大

enter image description here

所以：

西得乐（左列）宽度： 150像素

含量（中间列）宽度：自动

代尔（右列）的宽度：250像素

这里是我有什么（CSS）：

div#SideL { float: left; width: 150px; } 
div#Content { float: left; width: 70%; } 
div#SideR { float: left; width: 250px; }

的问题是在我不得不设置的70％的宽度的内容。这不是我想要的。我宁愿像：宽度：自动但它不起作用。 >>我希望内容宽度能够在页面的整个宽度上展开。

有什么想法？

谢谢:)

来源

2012-01-27 Bronzato

你需要的所有列具有相同的身高呢？ – Till 2012-01-27 10:39:50

我会用绝对位置。请检查下面的CSS：

div#SideL {position:absolute;width:150px;} 
div#Content {position:absolute;left:151px;right:251px;} 
div#SideR {position:absolute;right:0;width:250px; }

使用left和right为div#Content，你可以不管你想移动元素

演示：http://jsfiddle.net/7radp/

来源

2012-01-27 10:35:41 Sotiris

谢谢大家！它工作得很好。 – Bronzato 2012-01-27 10:55:50

第三列是实际的中间一列/填料，如：

<div style="width: 100%;"> 
    <div style="width: 150px; float: left;"> 
     1 
    </div> 
    <div style="width: 250px; float: right;"> 
     2 
    </div> 
    <div style="width: auto; margin-left: 150px; margin-right: 250px;"> 
     3 
    </div> 
    <div style="clear: both;"> </div> 
</div>

来源

2012-01-27 10:34:54 Hannes

<html> 
<head> 
<title>3 columns</title> 
<style type="text/css"> 

#contentwrapper{ 
float: left; 
width: 100%; 
} 

#contentcolumn{ 
margin: 0 250px 0 150px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ 
} 

#leftcolumn{ 
float: left; 
width: 150px; /*Width of left column in percentage*/ 
margin-left: -100%; 
background: #C8FC98; 
} 

#rightcolumn{ 
float: left; 
width: 250px; /*Width of right column in pixels*/ 
margin-left: -250px; /*Set margin to that of -(RightColumnWidth)*/ 
background: #FDE95E; 
} 

</style> 

</head> 
<body> 
<div id="maincontainer"> 

<div id="contentwrapper"> 
<div id="contentcolumn"> 
<div class="innertube">Content Column:</div> 
</div> 
</div> 

<div id="leftcolumn"> 
    Left Column 
</div> 

<div id="rightcolumn"> 
    Right Column 
</div> 

</div> 
</body> 
</html>

来源

2012-01-27 10:48:57 ranko85gmx

A 3栏的CSS解决方案在首页的整个宽度扩大

回答

相关问题