0

我正在尝试使用带有以下代码的 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的新手。如果有人就此给我建议，我将不胜感激。或者给出一些想法，我将来如何解决这类问题。先感谢您。

链接到小提琴

4

2 回答 2

2

坚持这样：httpvertical-align:top; : //jsfiddle.net/TEy2p/1/#selectedView

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

于 2013-06-19T11:30:14.717 回答
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;
    }

更新： 我已经检查了第一个答案，它在 chrome 中完美运行，但在 mozila 中却没有。尝试应用上面的代码并告诉我。

于 2013-06-19T11:38:09.300 回答