Question

我正在尝试将集合div设为像表格，所以这是我的样式表文件：

.maindiv {
display:table;
}
.divheader {
    display:table-row;
    width:100%;
    height:10%;
}
.divfooter {
     width:100%;
    height:20%;
}
.middlediv {
    display:table-row;
    width:100%;
    height:70%;
}
.divinheader {
    display:table-column;
    width:10%;
    height:80%;
}
.divinfooter {
    width:100%;
    height:50%;
}
.leftofmiddle {
     display:table-column;
    width:20%;
    height:100%;
}
.rightofmiddle {
     display:table-column;
    width:20%;
    height:100%;
}
.middleofmiddle {
     display:table-column;
    width:60%;
    height:100%;
}
.divinleftofmiddle {
     display:table-cell;
    width:100%;
    height:40%;
}

这是我的html标签：

 <div class="maindiv">
  <div class="divheader">
        <div class="divinheader"></div> 
        <div class="divinheader"></div>
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
        <div class="divinheader"></div> 
    </div>
    <div class="middlediv">
        <div class="leftofmiddle">
            <div class="divinleftofmiddle"></div>
            <div class="divinleftofmiddle"></div>
        </div>
<div class="middleofmiddle">

</div>
        <div class="rightofmiddle"></div>
        </div>
    <div class="divfooter">
        <div class="divinfooter"></div>
        <div class="divinfooter"></div>
    </div>
        </div>

但它看起来不像是一个表格，只是每个div都出现在一个新行

中

我在这里检查了一些答案，但似乎它们都取决于每行中有相同数量的div

Answer 1

使用表格结构更好，可以创建样式很好，试试吧。

尝试用一些div替换表标记

1 个答案: