在 2 列布局中，如果删除另一列，如何使一列扩展到总宽度？

发布于 2024-08-19 22:05:26 字数 566 浏览 3 评论 0原文

用标记更好地解释：

HTML:

<div><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->
  </div>
  <div id="sidebar"><!--may be at 70%-->
  </div>
</div>

CSS:

#sidebar{float:left;} /* no idea what width*/
#content{float:right;} /* no idea what width*/

我想要做的是，如果标记中不存在侧边栏，则内容 div 会展开以取代侧边栏：

<div>
 <div id="content"><!--width now at 100%-->
 </div>
</div>

原文

Better explained with a markup:

HTML:

<div><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->
  </div>
  <div id="sidebar"><!--may be at 70%-->
  </div>
</div>

CSS:

#sidebar{float:left;} /* no idea what width*/
#content{float:right;} /* no idea what width*/

What I want to do is that if the sidebar is not present in the markup, the content div expands to take the place of the sidebar:

<div>
 <div id="content"><!--width now at 100%-->
 </div>
</div>

分享到QQ

分享到微博

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

发布评论

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

走过海棠暮 2024-08-26 22:05:26

纯 CSS 方法将使用 CSS table-layout:

CSS:

#wrapper{
  display: table;
  width: 100%;
}
#content { 
  display: table-cell; 
  width: auto; 
}
#sidebar { 
  display: table-cell;
  width: 30%; 
}

HTML:

<div id="wrapper"><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->content
  </div>
  <div id="sidebar"><!--may be at 70%-->sidebar
  </div>
</div>

然而，上述内容不适用于 IE6/7 等较旧的浏览器。使用 javascript（如本文其他答案中提到的）作为后备将是理想的选择。

A pure CSS method will be using CSS table-layout:

CSS:

#wrapper{
  display: table;
  width: 100%;
}
#content { 
  display: table-cell; 
  width: auto; 
}
#sidebar { 
  display: table-cell;
  width: 30%; 
}

HTML:

<div id="wrapper"><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->content
  </div>
  <div id="sidebar"><!--may be at 70%-->sidebar
  </div>
</div>

The above however will not work for older browsers like IE6/7 etc. Using javascript (as mentioned by other answers to this post) as a fallback will be ideal.

回复收藏 0 原文

倾城花音 2024-08-26 22:05:26

如果您像这样翻转您的 div，就可以实现此目的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Columns</title>
<style type="text/css">
<!--
div{height:100px; margin-bottom: 50px; color: #fff;}
#sidebar{float:left;background: red;} /* no idea what width*/
#content{background: blue;} /* no idea what width*/
-->
</style>
</head>


<body>
<div><!--both sidebar and content share width-->
  <div id="sidebar"><!--may be at 30%-->
  Sidebar
  </div>
  <div id="content"><!--maybe at 70%-->
  Partial Width
  </div>
</div>

<div>
 <div id="content"><!--width now at 100%-->
 Whole Width
 </div>
</div>
</body>
</html>

这种方法的唯一缺点是，如果您想向内容 div 添加任何填充，您将需要知道侧边栏的宽度。这是可以解决的，但因为这不是你真正的问题，我不会告诉你如何吸鸡蛋，我相信你能解决；）

You can acheive this if you flip your divs around like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Columns</title>
<style type="text/css">
<!--
div{height:100px; margin-bottom: 50px; color: #fff;}
#sidebar{float:left;background: red;} /* no idea what width*/
#content{background: blue;} /* no idea what width*/
-->
</style>
</head>


<body>
<div><!--both sidebar and content share width-->
  <div id="sidebar"><!--may be at 30%-->
  Sidebar
  </div>
  <div id="content"><!--maybe at 70%-->
  Partial Width
  </div>
</div>

<div>
 <div id="content"><!--width now at 100%-->
 Whole Width
 </div>
</div>
</body>
</html>

The only drawback with this approach is that you will need to know how wide your sidebar is if you want to add any padding to your content div. That's fixable, but as that wasn't really your question, I won't tell you how to suck eggs, I'm sure you can work it out ;)

回复收藏 0 原文

少跟Wǒ拽 2024-08-26 22:05:26

这个很棘手：

如果你在侧边栏上设置宽度，使其浮动，并且不要在内容上设置宽度（另外，也不要浮动内容，因为这会导致 div“收缩包装”）。然后该列将按照您的预期运行。

#content { width: auto; display:block } /* not really necessary as these are default */
#sidebar { width: 30%; float: right }

我想补充一点，这本质上是不稳定的，而且往往是有限制的。最好的选择是，如果您控制服务器端的布局（您有一些生成布局的脚本），则在渲染之前将 css 类附加到文档中。

纯 html 解决方案是可能的，但它也依赖于这种特定的行为。如果您想浮动#content div，它将不起作用（因为您将被迫指定尺寸以避免收缩包装效果）。

您也可以使用 JavaScript 来完成此操作。需要注意的是，当 javascript 启动时，您可能会得到 FOUC（无样式内容的闪存）。

使用 jQuery，您可以执行诸如计算相邻 div 之类的操作，即

jQuery('#content').nextAll().length

然后使用结果执行以下操作：

jQuery('#content').addClass('has_sidebar').

This one is tricky:

If you set the width on the sidebar, float it, and don't set the width on the content (also, don't float the content either as this will cause the div to "shrink-wrap"). Then the column will behave like you desired.

#content { width: auto; display:block } /* not really necessary as these are default */
#sidebar { width: 30%; float: right }

I'd like to add that this is intrinsically flaky and often limiting. Your best bet is, if you control the layout on the server side (you've got some script that generates layouts) then append css classes to the document before it's rendered.

A pure html solution is possible, but it also relies on this particular behavior. If you want to float the #content div, it won't work (because you'll be forced to specify the dimensions to avoid the shrink wrapping effect).

You can also do this using javascript. The thing to watch out for there is you might get a FOUC (flash of unstyled content) as the javascript kicks in.

With jQuery you could do something like count the adjacent divs i.e.

jQuery('#content').nextAll().length

Then use the result to do something like:

jQuery('#content').addClass('has_sidebar').

回复收藏 0 原文

情定在深秋 2024-08-26 22:05:26

功能：

<script type='text/javascript'>
   /**** Minimising ****/

function Minimise()
{
    document.getElementById('FirstColumn').style.width = '0%';
    document.getElementById('SecondColumn').style.width = '100%';
}

/**** Expanding ****/

function Maximise()
{
    document.getElementById('FirstColumn').style.width = '50%';
    document.getElementById('SecondColumn').style.width = '50%';
}
    </script>

运行该功能

<a href="javascript:Minimise();">Click here to minimise column1 etc</a>

然后您可以随时添加样式块来隐藏所有内容或任何您需要执行的操作。
您也可以使用切换按钮，但这种方式使用 div 效果非常好。
然而你真的想去做这件事。

Function:

<script type='text/javascript'>
   /**** Minimising ****/

function Minimise()
{
    document.getElementById('FirstColumn').style.width = '0%';
    document.getElementById('SecondColumn').style.width = '100%';
}

/**** Expanding ****/

function Maximise()
{
    document.getElementById('FirstColumn').style.width = '50%';
    document.getElementById('SecondColumn').style.width = '50%';
}
    </script>

To run the function

<a href="javascript:Minimise();">Click here to minimise column1 etc</a>

Then you can always add in style block to hide all content or whatever you need to do also.
You could also use a toggle but this way can work really nice using div's.
However you want to go about it really.

回复收藏 0 原文