Css HTML布局：将侧栏列添加到现有站点_Css_Css Float_Html_Html Table

Css HTML布局：将侧栏列添加到现有站点

css html

Css HTML布局：将侧栏列添加到现有站点,css,css-float,html,html-table,Css,Css Float,Html,Html Table,我有一个网站，其主体如下： ┌───────────────┐ │ header │ └───────────────┘ ┌───────────────┐ │ content │ └───────────────┘ ┌───────────────┐ │ footer │ └───────────────┘ ... ... ... 在这些divs中没有使用绝对/相对定位技巧，但是在这些divs及其内部元素的样式中有许多floats、clears、m

我有一个网站，其主体如下：

┌───────────────┐
│     header    │
└───────────────┘
┌───────────────┐
│    content    │
└───────────────┘
┌───────────────┐
│     footer    │
└───────────────┘


...
...
...

在这些

div

s中没有使用绝对/相对定位技巧，但是在这些

div

s及其内部元素的样式中有许多

float

s、

clear

s、

margin

s和

padding

s。所有这些都会产生一个类似这样的站点：

┌───────────────┐
│     header    │
└───────────────┘
┌───────────────┐
│    content    │
└───────────────┘
┌───────────────┐
│     footer    │
└───────────────┘

我的问题是：如何添加一个独立的固定宽度左列（侧边栏），其中包含额外的内容，从而收缩整个站点（页眉内容页脚），并将其向右移动

┌────┐┌─────────┐
│side││ header  │
│bar │└─────────┘
│    │┌─────────┐
│    ││ content │
│    │└─────────┘
│    │┌─────────┐
│    ││ footer  │
└────┘└─────────┘

我知道一个近乎理想的解决方案，但它很难看，需要重新嵌套现有的div：


...
...
...
...

是否有可能做到优雅，只需在身体的某个地方添加一个外部边栏元素，即像这样


...
...
...
...

我尝试过天真的方法，比如样式：

#侧边栏{float:left；width:20em；}

或

#标题{左边距：20em；}
#内容{左边距：20em；}
#页脚{左边距：20em；}

这种方法可以工作，但在页眉/内容/页脚中遇到

clear:both

或

clear:left

时，它会立即中断

那么，有什么替代表解决方案吗？

我喜欢使用绝对定位的边栏，然后将包装上的填充设置为该元素的宽度。然后在其他元素上设置边距填充，或者将其添加到包装器上的填充中

.container{位置：相对；填充：0 55px；}
#边栏{
位置：绝对位置；
顶部：0；底部：0；左侧：0；
宽度：50px；
背景：#000；
}
#标题{边框：1px实心#000；宽度：100px；高度：20px；
保证金：0.5px 0；
}
#内容{边框：1px实心#000；宽度：100px；高度：50px；
保证金：5px0 5px0；
}
#页脚{边框：1px实心#000；宽度：100px；高度：20px；
保证金：5px0；
}

我做了一点小动作来帮助您入门。此外，您可能需要检查div内容是否没有弄乱整个CSS。希望这有帮助

编辑：所有颜色和尺寸都是示例中使用的虚拟颜色和尺寸。它可以在任何尺寸下工作

html:


...
...
...

css:

.clearFix{
明确：两者皆有；
}
#边栏{
宽度：50px；
高度：30px；
背景颜色：绿色；
浮动：左；
}
#标题{
宽度：250px；
背景色：红色；
左边距：55像素；
}
#左测试{
宽度：50px；
高度：50px；
浮动：左；
背景颜色：粉红色；
}
#测试权{
宽度：50px；
高度：50px；
左边距：55像素；
背景颜色：紫色；
}
#内容{
宽度：250px；
高度：20px；
背景颜色：蓝色；
左边距：55像素；
}
#页脚{
宽度：250px；
高度：20px；
背景颜色：橙色；
左边距：55像素；
}

我会使用HTML5元素赋予标记语义

<body>
  <aside><!-- Nav bar --></aside>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
</body>


...
...
...

然后将

置于一旁

和

文章

与

float:left

一起使用，谢谢你的jsfiddle。它完美地说明了我所说的：

clear

确实破坏了这里的东西-如果你将边栏的高度设置得更长，标题将变得更大：每当我为标题设置一个定义的高度时，问题就不再出现：你似乎没有更新任何东西（可能没有保存？），设置页眉（或内容，或页脚）的固定高度不是我的选择，尤其是对于内容。我的错，我确实没有保存。我不需要更新，因为你不能使用任何固定高度。谢谢！此解决方案还包括重新嵌套页眉/内容/页脚，但至少没有基于表的解决方案那么麻烦。是否可以在

正文

中保留页眉/内容/页脚？我想应该可以用相对位置和填充来设置

主体的样式？现在，您的解决方案也适用于主体：-看起来这正是我需要的。我知道样式主体是一种不好的做法，但我想在这种情况下，它比所有替代方案（即重新嵌套）都要好。