Question

我正在尝试使用CSS和以下代码构建流体布局。（对不起，如果我包括很多）。

这是reset.css的代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

这是mycss.css的代码

.border
{
/*
    border-color:#000000;
    border-style: solid;
    border-width: 1px;
*/  
    background-color: #000000;
}

.border-aqua
{
/*
    border-color: #13eded;
    border-style: solid;
    border-width: 1px;
*/  
    background-color: #12eded;
}

.border-red
{
/*
    border-color: #ff0404;
    border-style: solid;
    border-width: 1px;
*/
    background-color: #ff0404;
}

.border-green
{
/*
    border-color: #008100;
    border-style: solid;
    border-width: 1px;
*/
    background-color: #008100;
}

.border-blue
{
/*
    border-color: #0000fd;
    border-style: solid;
    border-width: 1px;
*/
    background-color: #0000fd;
}

.border-blue:hover
{
    background-color: #ff0404;
}

#title
{
    margin: 10px;
    height: 40px;
    width:auto;

    display: block;

}

#ide
{
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    height: 80%;

    width: auto;


    display: block;
}

#container
{
    width:100%;
    height: 100%;
    display:table;
}

#tasks
{
    height: 100%;
    width:250px;
    display:table-cell;
}


#selectedView
{
    height: 100%;
    width: 200px;
    display: table-cell;
}

.selectedTasks
{   
    height:30px;
    width: 150px;
    display: block;


    display:-moz-inline-stack;
    display:block;


    background-color: #878787;

}

#selectedViewExpander
{
    height: 100%;
    width: 15px;
    display: table-cell;
}


#area
{
    width: auto;
    height: 100%;
    display: table-cell;
}

这里是html：

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>
        <link href="./css/reset.css" rel="stylesheet" type="text/css" media="all">
        <link href="./css/mycss.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
        <div id="title" class="border"></div>
        <div id="ide">
            <div id="container" class="border">
                <div id="tasks" class="border-red"></div>
                <div id="selectedView" class="border-green">
                    <p class="selectedTasks">Copy</p>
                    <p class="selectedTasks">Past</p>
                    <p class="selectedTasks">Cut</p>
                </div>
                <div id="selectedViewExpander" class="border-blue"></div>
                <div id="area" class="border-aqua">

                </div>
            </div>          
        </div>
    </body>
</html>

我在Mozilla中显示此页面时遇到问题。但是在Chrome和Safari中，一切正常。我是css和html的新手。如果有人给我这方面的建议，我们将非常感激。或者想一想我将来如何能够找出这类问题。先感谢您。

链接到Fiddle

Answer 1

将vertical-align:top;粘贴到#selectedView，如下所示：http://jsfiddle.net/TEy2p/1/

目前，Firefox正在将文本放在表格单元格的底部。

Answer 2

请查看一些更新，例如mycss.css中的float属性

#tasks
    {
        height: 100%;
        width:250px;
        display:table-cell;
        float:left;
    }
    #selectedView
    {
        height: 100%;
        width: 200px;
        display: table-cell;
        float:left;
    }
    #selectedViewExpander
    {
        height: 100%;
        width: 15px;
        display: table-cell;
        float:left;
    }

<强>更新我检查了第一个答案，它完美地工作铬但不是莫兹拉。尝试应用上面的代码并让我知道。

Mozilla无法识别显示：内联显示内部：table-cell容器

2 个答案: