Html 工作两柱布局，高度可调，宽度固定；这个设计对SEO友好吗？浏览器兼容性？背景_Html_Css_Internet Explorer_Seo_Two Column Layout

Html 工作两柱布局，高度可调，宽度固定；这个设计对SEO友好吗？浏览器兼容性？背景

html css internet-explorer seo

Html 工作两柱布局，高度可调，宽度固定；这个设计对SEO友好吗？浏览器兼容性？背景,html,css,internet-explorer,seo,two-column-layout,Html,Css,Internet Explorer,Seo,Two Column Layout,我已经搜索了一段时间的布局，它有960像素的宽度和两列：主要内容：右对齐，宽度550px，从容器右边缘插入侧边栏：左对齐，宽度为250px，顶部、左侧和底部边缘与容器齐平我一直在努力解决的一点是设置背景，使边栏背景占据250px的宽度，100%的父级高度，并与父级的左边缘齐平，使主要内容占据父级的剩余宽度和100%高度我看过一些技巧，但它们似乎相对不灵活，例如，尽管它很优雅，但人造柱似乎并不太合适考虑一下，我决定尝试将内容的呈现与背景的呈现分开。具体来说，我将主内容向右浮动，侧边栏

我已经搜索了一段时间的布局，它有960像素的宽度和两列：

主要内容：右对齐，宽度550px，从容器右边缘插入
侧边栏：左对齐，宽度为250px，顶部、左侧和底部边缘与容器齐平

我一直在努力解决的一点是设置背景，使边栏背景占据250px的宽度，100%的父级高度，并与父级的左边缘齐平，使主要内容占据父级的剩余宽度和100%高度

我看过一些技巧，但它们似乎相对不灵活，例如，尽管它很优雅，但人造柱似乎并不太合适

考虑一下，我决定尝试将内容的呈现与背景的呈现分开。具体来说，我将主内容向右浮动，侧边栏向左浮动，然后一个

clear:both

，这样容器将调整为两列中较大的一列

接下来，虽然仍在容器内，但在清除

后：两个，我有两个绝对定位的空div，侧边栏的高度为100%，宽度为250px，左侧为0
，然后主内容的宽度为100%。我还调整了z索引，使边栏位于前面
还有其他必要的CSS（例如，容器包装器必须相对定位），但请参见下面的源代码
问题:
这与我在Mac上使用Safari时所希望的完全一样，两个背景都根据最高的列展开，并且源代码中的标记是有效的。然而，我的两个主要关切是：
我不确定这将如何在其他浏览器中呈现，尤其是IE
我曾试图在设计时考虑到SEO，但我对SEO不太了解，因为我还在学习，这对SEO有多友好
其他来源


（可能还有其他的，对不起不记得了！）
源代码
注意我使用了明亮的颜色和调整的div来更好地说明正在发生的事情
<!DOCTYPE html>
<html lang="en-US" >
<head>
<title>Test Page</title>
<meta charset="UTF-8"/>
<style>

#main {
    
}

#main-outer-wrapper {
    width: 960px;
    margin: 0 auto;
}

#main-inner-wrapper {
    background: red;
    /* This is the fallback background colour */
    position: relative;
    /* Must be relative for the background divs to have 100% height and to ensure z-index functions */
    z-index: -20;
    /* Ensure fallback background is below all other divs */
}

#main-content {
    /* This is where all the actual content will be */
    width: 550px;
    float: right;
    /* IMPORTANT float */
    background: orange;
    /* Background would actually be transparent, here it is for illustration */
    margin: 10px 80px 10px 10px;
    /* Keep content away from edges as part of design only*/
}

#left-primary-sidebar {
    /* This is for the actual sidebar content */
    float: left;
    /* IMPORANT float */
    background: green;
    /* Again, background colour is purely for illustration */
    width: 230px;
    margin: 10px;
    /* I have adjusted the margin for illustration only, in situ width is 250px and margin is 0 */
}

#main-content-background {
    /* This div has no content */
    background: blue;
    /* The intended right column background */
    
    /*  Position MUST be absolute so that the div can 
    *       have its height based on parent container, using
    *       top and bottom. Width can be specific but I have
    *       set it to 100% for maintainability */
    position: absolute;
    width: 100%;
    right: 0;
    top:0;
    bottom: 0;
    z-index:-10;
    /* As width is 100%, it is important that this is placed below the sidebar */
}

#left-primary-sidebar-background {
    /* As above regarding position */
    background: purple;
    position: absolute;
    width: 250px;
    left: 0;
    top:0;
    bottom: 0;
    z-index:-9;
    /* Div must be above right column */
}


.clear { 
    clear: both;
}

</style>
</head>

<body>
    <section id="main">
        <div id="main-outer-wrapper" class="wrapper outer-wrapper">
            <div id="main-inner-wrapper" class="wrapper inner-wrapper">
                <section id="main-content">
                    <div id="main-content-wrapper" class="wrapper">
                    Content
                    </div><!-- #main-content-wrapper -->
                </section><!-- #main-content -->
                <section id="left-primary-sidebar">
                    <div id="left-primary-sidebar-wrapper" class="sidebar">
                    Sidebar
                    </div><!-- #left-primary-sidebar-wrapper -->
                </section><!-- #left-primary-sidebar -->            <div id="main-content-background"></div>
                <div id="left-primary-sidebar-background"></div>
                <div class="clear"></div>
            </div><!-- #main-inner-wrapper -->
        </div><!-- #main-outer-wrapper -->
    </section><!-- #main -->
</body>
</html>


测试页
#主要{
}
#主外包装{
宽度：960px；
保证金：0自动；
}
#主内包装{
背景：红色；
/*这是备用背景色*/
位置：相对位置；
/*必须是相对的，以便背景div具有100%的高度，并确保z索引功能*/
z指数：-20；
/*确保后备背景低于所有其他div*/
}
#主要内容{
/*这就是所有实际内容的位置*/
宽度：550px；
浮动：对；
/*重要浮点数*/
背景：橙色；
/*背景实际上是透明的，这里是为了说明*/
利润率：10px 80px 10px 10px；
/*仅作为设计的一部分，使内容远离边缘*/
}
#左主边栏{
/*这是用于实际的侧边栏内容*/
浮动：左；
/*重要浮点数*/
背景：绿色；
/*同样，背景色纯粹是为了说明*/
宽度：230px；
利润率：10px；
/*我调整了边距仅用于插图，原位宽度为250px，边距为0*/
}
#主要内容背景{
/*这个div没有内容*/
背景：蓝色；
/*预期的右栏背景*/
/*位置必须是绝对的，以便div可以
*使其高度基于父容器，使用
*顶部和底部。宽度可以是特定的，但我有
*为便于维护，将其设置为100%*/
位置：绝对位置；
宽度：100%；
右：0；
排名：0；
底部：0；
z指数：-10；
/*由于宽度为100%，因此必须将其放置在侧边栏下方*/
}
#左主边栏背景{
/*关于职位，如上所述*/
背景：紫色；
位置：绝对位置；
宽度：250px；
左：0；
排名：0；
底部：0；
z指数：-9；
/*Div必须位于右列上方*/
}
.clear{
明确：两者皆有；
}
内容
边栏

感谢阅读，期待评论
 至于它在IE中的外观，您可以使用类似的工具来测试它
至于SEO：设计对SEO的影响很小，除非你的设计导致你的页面加载缓慢，因为页面加载速度确实有影响。像谷歌这样的复杂搜索引擎在源代码中使用文本位置来表示重要性的时代已经远去。搜索引擎现在分析你页面的实际文本内容，并将其与其他页面的文本内容进行比较。在h1标记中放置一些东西确实向搜索引擎表明该文本是一个标题，因此比页面上的其他文本稍微重要一些，但是如果该文本实际上似乎与对其余文本的分析不相关，我认为他们会捕获该文本并丢弃h1文本
如果你的网站几乎没有竞争对手，那么你在页面上所做的事情会对你的排名产生巨大影响——但是如果竞争程度中等，那么链接到你的页面的内容（以及链接到你的页面的数量）在页面排名分数中占据如此大的比例，以至于页面的结构完全没有可测量的影响。您的页面排名将由其内容与搜索词的相关性决定，并根据匹配的其他页面内容的相对相关性进行加权。这纯粹是关于内容和权威
所以我不会太担心你的页面结构会如何影响搜索引擎排名。只需确保页面快速加载即可