Question

enter image description here

上图中解释了一切。

基本上，我需要一个侧边栏div，其宽度根据其中的内容扩展，mainContent扩展到窗口宽度的其余部分。

Answer 1

如果您完全担心左侧边栏的宽度，可以将max-width css属性应用于左侧div，以防您没有突破内联内容。

另外，如果你支持最大宽度的ie7，请确保你的doctype是严格的。

Answer 2

这似乎是这样做的。不过，@ stefanw有一点意见。侧栏将扩展到其文本的宽度，这意味着文本将不会换行。我想这可能不是你想要的。或者也许是，如果你在那里放的东西没有变化，但是也没有固定？

<html>
<head>
  <style type="text/css">
#overallWrapper div {
  background: #CCC;
  border: 1px solid black;
  padding: 15px;
  height: 100%;
}
#sideBar {
  float: left;
}
  </style>
</head>
<body>
  <div id="overallWrapper">
    <div id="sideBar">
      I need this to expand to the width of this text...
    </div>
    <div id="content">
      This should take the rest of the room, whatever's left...
    </div>
  </div>
</body>
</html>

如果需要，您可以删除overallWrapper。

CSS：流体侧栏 - 流体内容

2 个答案: