3

我有一个侧边栏和一个内容区。我只是将侧边栏浮动到左侧，将内容区域浮动到右侧。但是当屏幕尺寸改变时我有问题。两个花车之间有很大的空间。我认为这是由于内容区域中图像的大小以及它是向右浮动的。因此，我也将这个内容区域浮动到了左侧。现在内容区域没有延伸到屏幕的最右端。有什么方法可以将内容区域放置在正确的部分而没有任何空间（只需划分侧边栏和内容区域的空间就足够了）？

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

4

4 回答 4

2

Change your CSS to this:

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

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

This will remove the space and also retain fluidity in the layout - Removed as the OP wants a fixed layout

于 2012-10-09T06:25:25.790 回答
1

放置.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>
于 2012-10-09T06:06:57.760 回答
0

而不是使用 float:right 使用 float:left 让两个 div 保持在一起，看看这个 fiddle

http://jsfiddle.net/FZZnk/

让我知道这是否能解决您的问题

于 2012-10-09T06:24:08.457 回答
0

首先，您需要对所有 div 宽度使用百分比。其次，您可以使两者浮动到同一侧（右侧或左侧），并使用边距或百分比填充以在这些 div 之间留出空间。

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

现在，因为您的左侧栏具有固定宽度和向左浮动，您可以这样做：删除右侧浮动，并在侧栏的大小处添加 margin-left。并且不要忘记将 div 设置为 width: 100%。

.dashContent {
    float: right;
    margin-left: 210px;
    position: relative;
    top: 25px;
    width: 100%; }
于 2012-10-09T06:30:45.163 回答