代码之家  ›  专栏  ›  技术社区  ›  The Surrican

在SEO优化的SOC(源顺序内容)布局中,动态高度标题只使用CSS,不使用javascript?

  •  1
  • The Surrican  · 技术社区  · 14 年前

    我想做一个布局,搜索引擎和速度浏览器友好的内容首先在源代码。通常是这样的:

        <body>
        <div id="content" style="margin-top: 200px;">
        i am content, i go first
        </div>
        <div id="head" style="height: 200px; position: absolute;">
        i am an header that is depressed because my designer things i am not important
        </div>
        </body>
    

    但我需要一个动态大小的头部增加其内容的高度… 这肯定是一个常见的问题。是否有可能以某种方式解决? 有什么想法吗?

    4 回复  |  直到 14 年前
        1
  •  1
  •   vassilis    14 年前

    不过我同意@baptek的观点,我真的很想出错,因为这看起来很有趣。

    另外,这可能不是你需要的,但是HTML5有一个 "reversed" attribute 对于 <ol> 这就行了。

        2
  •  1
  •   babtek    14 年前

    我认为单独使用CSS是不可能的。需要javascript。

        3
  •  1
  •   Nazariy    14 年前

    就我而言,这只能用表格来实现。

    <table>
        <tr>
            <td><!-- empty table cell --></td>
            <td rowspan="2" valign="top">General Content</td>
        </tr>
        <tr>
            <td valign="top">Navigation</td>
        </tr>
    </table>
    
        4
  •  0
  •   Marc Thibault    14 年前

    既然您已经用id标记了这些div,那么将样式放到css中就更有意义了。

    无论如何,你试过了吗

    height: auto; 
    

    如果你想让高度随内容调整,但至少有200px,那么

    min-height: 200px; 
    

    应该有技巧。