1

试图在包装 div 中浮动两个 div，其中只有侧边栏具有基于 % 的宽度。主 div 需要根据侧边栏的宽度进行拉伸，填充包装器的剩余区域（即它本身没有设置宽度）。

<div class="wrapper">
   <div class="sidebar"></div>
   <div class="main"></div>
</div>

这是获得这个想法的小提琴：

我已经尝试了,等的各种变体inline-block，但似乎无法让它发挥作用。float:leftfloat:right

4

3 回答 3

1

这个问题可以通过两种不同的方式解决：

I. SIDE 和 BODY 有自己的滚动条

在这种情况下，sidebarwill 有自己的滚动条，mainwill 也有自己的滚动条。当您不想滚动侧边栏，同时滚动主要内容时，此方法很好。

使您的包装器具有整页尺寸：

.wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

侧边栏的 CSS 将是：

.sidebar {
    background: blue;
    width: 20%;
    height: 100%;
    float: left;
    overflow: auto;
}

和你的主要 div：

.main {
    background: red;
    height: 100%;
    overflow: auto;
}
  • [!]您可以在FIDDLE检查此方法。

二、SIDE 和 BODY 将滚动 WRAPPER

在这种情况下，sidebar和main内容都将由 main 滚动wrapper。为了创建这个，只有float侧边栏和主要内容。

.main {
    background: red;
    width: 80%;
    float: left;
}
.sidebar {
    background: blue;
    width: 20%;
    float: left;
}
  • [!]您可以在FIDDLE检查此方法。
于 2013-05-24T05:38:54.090 回答
0

这里有你的解决方案

http://jsfiddle.net/YKPy5/

<pre>
    <div class="wrapper">
      <div class="main">
        <div class="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        </div>
      </div>
    </div>


  .wrapper {
    background: 000;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 200px;
}
  .main {
    background: red;
    display: inline-block;
    min-height: 200px;
}
  .sidebar {
    background: blue;
    width: 20%;
    min-height: 200px;
    display: inline-block;
}

</pre>

请注意：没有宽度的任何内联/内联块元素都不会创建任何空间。您必须添加内容/文本才能获得效果，

于 2013-05-24T06:11:05.080 回答
0

鉴于您提供的代码：

<div class="wrapper">
    <div class="sidebar"></div>
    <div class="main"></div>
</div>

我认为这个 css 会满足你的要求：

.sidebar {
    float:left;
    width:20%;
}

.main {
    margin:0 0 0 20%;
}

假设您不希望 .main div 内容包裹在 .sidebar 之下；并且 .main 将占用父级 .wrapper 的剩余空间。

支持也应该回到过去。

于 2013-05-24T05:53:09.967 回答