Question

我正在学习CSS，到目前为止管理了很多个小时后创建一个简单的布局，但仍然不知道如何将内容（文本，块，等等）放在float：left div中。这是代码，我希望有人可以提供帮助，因为我会在很短的时间内坚持下去！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <style type="text/css">
        #container {
            /* */
            border: 1px solid; 
            /* */
            padding-top: 10px;

            margin-left:auto;
            margin-right:auto;
            width: 980px;
            height: auto;
        }
        #content {
            display: inline-block;
        }
        #content .left {
            display: inline-block;
            border: 1px solid; 
            padding-left: 5px;
            padding-top: 10px;
            width:773px;
            float:left;

        }
        #content .right {
            display: inline-block;
            padding-top: 10px;
            width:200px;    
            float:right;
        }

        #content .inside-left {
           text-align: center;
           margin-left: auto;
           margin-right: auto;
        }


    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <div class="left">
                <!-- i need every inside-left class center aligned -->
                <div class="inside-left">
                    <table border="1">
                        <tr>
                            <td>center align</td>
                            <td>damn it</td>
                        </tr>
                    </table>

                </div>

            </div>
            <div class="right">
                test
            </div>
        </div>
    </div>
</body>

编辑：哦，为什么 * * css很难理解？它只是我吗？

Answer 1

只是一个微小的CSS修改产生了巨大的差异：

改变这个：

#content .inside-left {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

对此：

#content .inside-left, #content .inside-left > * {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

查看区别：http://jsfiddle.net/8JfNF/1/

此CSS选择器#content .inside-left > *选择.inside-left的所有直接子项（而不是孙子项），并将相同的CSS应用于它们。

Answer 2

CSS并不难，我认为这在网络世界中是最简单的逻辑...尝试从一些好的网站学习..

并且有一些建议给你..

更好地使用类而不是 id
总是写4个基本表格属性宽度，cellpadding，cellspacing和border
以水平为中心， td 中的内容使用text-align:center;使垂直中心写入vertical-align:middle

学习CSS技巧看到我的bookmarks ...这肯定有助于你

将项目置于浮动div中

2 个答案: