Question

我有侧边栏和内容区域。我只是将侧边栏浮动到左侧，内容区域浮动到右侧。但是当屏幕尺寸发生变化时我会遇到问题。两个浮子之间出现了很大的空间。我认为这是由于内容区域中图像的大小，因为它是浮动的。因此，我也将这个内容区域浮动到左侧。现在内容区域没有延伸到屏幕的最右端。有没有办法让内容区域适合没有任何空间的右侧部分（只需要分隔侧边栏和内容区域的空间就够了）？

如果您需要更多解释，请告诉我们。

Answer 1

将CSS更改为：

.dashContent {
     float: left;
     margin: 10px;
     position: relative;
     top: 25px;
     min-width: 80%;
}

.sidebarDash {
    float: left;
    height: auto;
    width: 195px;
}

~~这将删除空间并保持布局中的流动性~~ - 删除，因为OP想要一个固定的布局

Answer 2

将.sidebarDash与adsolute position放在一起，并将padding-left与侧边栏宽度相同.dashContent

将这两个在一个主DIV中包裹为 -

<div class="dashContainer">

  <div class="sidebarDash"></div>
  <div class="dashContent"></div>

</div> <!-- Clears the float with CSS -->

CSS -

.dashContainer{ overflow: hidden; position: relative }
.sidebarDash { position: absolute; left: 0; top: 0; width: 200px; }
.dashContent { padding: 0 0 0 210px; }

jQuery -

将其插入文档的<head>部分 -

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
  $(function(){
    var sidebarHeight = $('.sidebarDash').height(); 
    $('.dashContainer').css('min-height', sidebarHeight);
  })
</script>

Answer 3

而不是使用float：右边使用float：left所以两个div保持在一起，看看这个小提琴

http://jsfiddle.net/FZZnk/

如果这可以解决您的问题，请告诉我

Answer 4

首先，您需要对所有div的宽度使用百分比。第二，你可以使两者浮动到同一侧（右或左），并使用百分比填充或填充以使这些div之间的空间。

.dashContainer{ overflow: hidden; width: 100%; }
.sidebarDash { float: left; width: 20%; }
.dashContent { float: left; width: 80%; }

现在，因为您的左侧栏有固定宽度并且左侧浮动，您可以这样做：向右移除浮动，并在侧栏的大小处添加左边距。并且不要忘记将div设置为宽度：100％。

.dashContent {
    float: right;
    margin-left: 210px;
    position: relative;
    top: 25px;
    width: 100%; }

与浮动和宽度有关

4 个答案: