Question

我正在开发一个简单的网站，并使用Sass开发其设计，而不是其他框架。

当我开发主页时，我有经典的段落占位符“Lorem Ipsum ..”。

问题在于，当缺少此段落时，主布局的宽度会减小，主容器会落在导航菜单上。

如果我添加一个超过1行的段落，它会修复布局（比如拉伸它）并使其与我开发主页时一样。

这是基本布局：

<body>      
    <table id="max-container">
        <tr id="header">
            <td valign="top">
                    <header>
                            HeaderText
                    </header>
                    <section class='main-content' id="homepage">
                            <nav>
                                <table>
                                    <tr>
                                        <td> Home </td>
                                    </tr>
                                    <tr>
                                        <td> Contact </td>
                                    </tr>
                                </table>
                            </nav>
                            <article>
                                Some text here (Probably populated by some php script)
                            </article>
                    </section>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <footer>
                    <div id="footer-text">
                        someTextHere
                    </div>
                </footer>
            </td>
        </tr>
       </table>
</body>

基本布局与相关CSS为here。

这是我选择max-container表时firefox检查器显示的选项： max-container-table selection

这是我选择body元素时的选择： body

我的代码出了什么问题？

Answer 1

实际上你所有的HTML都搞砸了。

我为你想要的布局写了一个干净的html。

请查看更新后的fiddle

AND请不要使用表格进行布局，通常你有HTML5用于上帝的清酒!!

<强> HTML：

<section class="main_container">
    <header>HeaderText</header>
    <section>    
        <aside>        
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </aside>
        <article>Some text here (Probably populated by some php script)</article>
    </section>
    <footer>someTextHere</footer>
</section>

<强> CSS：

*{margin:0;padding:0;list-style:none;}
.main_container{background:#ddd;}
header, .main_container>section{padding-bottom:40px;}
aside{float:left;padding-right:20px;}
aside ul li{float:left;padding-right:10px;}
article{background:#e0eaf1;overflow:hidden;}

如果没有伸展它的段落，则布局被破坏

1 个答案: