Question

我尝试用“固定”样式制作页面的某些部分。我有类似的HTML：

<div class="container">
    <table class="frame">
    <tr>
        <td colspan="2">
            <div class="toolbar">
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="left-panel">
                <ul>
                    <li>Test 1</li>
                    <li>Test 2</li>
                    <li>Test 3</li>
                    <li>Test 4</li>
                    <li>Test 5</li>
                </ul>
            </div>
        </td>
        <td>
            <div class="content-fluid">
                Lorem ipsum dolor sit amet,<br /> 
                consectetur adipisicing elit, sed <br />
                do eiusmod tempor incididunt ut labore<br />
                 et dolore magna aliqua. 
            </div>
        </td>
    </tr>
    </table>
</div>

和CSS：

<style type="text/css">
    .container {
        text-align: center;
    }

    .frame {
        border: none;
        border-collapse: collapse;
    }

    .frame td {
        vertical-align: top;
    }

    .toolbar {
        heigth: 40px;
        background-color: blue;
    }

    .left-panel {
        width: 150px;
        margin-top: 20px;
        background-color: yellow;   
    }

    .content-fluid {
        margin-top: 20px;
        margin-left: 10px;
    }
</style>

如何使.toolbar和.left-panel固定并居中。我尝试添加样式固定和负边距。它有效，但我不认为这是正确的解决方案。我也使用table for frame（我不知道如何以另一种方式将它居中（.content-fluid应该拉伸））它看起来很难看。抱歉我的英语不好:(

Answer 1

如果要创建表格中心，可以将“.Container”宽度设置为100％，并在框架中添加“margin：auto”。看看这个：http://jsfiddle.net/KNdw5/

关于你的第一个问题，请你解释一下吗？

固定块元素

1 个答案: