当前位置：文江博客话题详情

扩展到整个页面宽度的 3 列 CSS 解决方案

发布于 2024-12-29 07:34:58 字数 498 浏览 0 评论 0原文

我想要一个全宽的 3 列，如下所示

在此处输入图像描述

所以：

SideL（左列）宽度：150px

内容（中心列）宽度：auto

SideR（右列）宽度：250px

这是我所拥有的（CSS）：

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

问题出在内容中，我必须将宽度设置为 70%。这不是我想要的。我更喜欢类似： width:auto 但它不起作用。 >>我希望内容宽度扩展到页面的整个宽度。

有什么想法吗？

谢谢：）

原文

I would like a full-width 3 columns like showed below

enter image description here

So:

SideL (left column) width: 150px

Content (center column) width: auto

SideR (right column) width: 250px

Here is what I have (CSS):

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

The problem is in the Content where I had to set a width of 70%. This is not what I was looking for. I would prefer something like: width:auto but it doesn't work. >> I would like the content width to expand on the whole width of the page.

Any idea?

Thanks :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花期渐远 2025-01-05 07:34:58

我会使用绝对位置。检查以下 css：

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

对 div#Content 使用 left 和 right，您可以将元素移动到任何您想要的位置

Demo ： http://jsfiddle.net/7radp/

I would use absolute positions. Check the following css:

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

Using left and right for div#Content you can move the element wherever you wish

Demo: http://jsfiddle.net/7radp/

回复收藏 0 原文

岁月苍老的讽刺 2025-01-05 07:34:58

第三列是实际的中间列/填充符，例如：

<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>

The third column is the actual middle column / filler, like:

<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>

回复收藏 0 原文

感性 2025-01-05 07:34:58

 <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>

 <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>

回复收藏 0 原文

~没有更多了~