一个CSS表在并行div之一 [英] A CSS table in one of parallel divs
问题描述
在网页上，我有一个容器div，里面有两个div。在第一个内部div我试图设置一个CSS表有4列均匀填充div。
我遇到的问题是，单元格似乎得到它们相对于页面宽度的宽度，而不是表/它的父div。如果我将宽度从25％降低到更低的值，它将适合，但如果我缩放页面，它们将仍然包装，因为右边的div命中最右边的表格单元格。
$ b
< html xmlns =http： //www.w3.org/1999/xhtml\">
< head>
< style type =text / css>
html，body，div {
display：block;
height：100％;
width：100％;
}
#container {
position：absolute;
height：300px;
width：100％;
}
.sideBySide {
position：absolute;
float：left;
height：100％;
}
#galleria {
background-color：＃0C0;
left：0px;
right：300px;
width：auto;
}
#tagit {
background-color：＃099;
right：0px;
width：300px;
}
#table {
position：absolute;
margin：0px;
padding：0px;
display：table;
height：100％;
width：100％;
}
.table-row {
position：relative;
margin：0px;
padding：0px;
display：table-row;
width：100％;
height：25％;
}
.table-cell {
position：relative;
margin：0px;
padding：0px;
display：table-cell;
float：left;
height：100％;
width：25％;
padding：20px;
}
.kuva {
position：relative;
margin：0px;
padding：0px;
width：100％;
height：100％;
background-color：＃999;
}
< / style>
< / head>
< body>
< div id =container>
< div id =galleriaclass =sideBySide>
< div id =table>
< div class =table-row>
< div class =table-cell>
< div class =kuva> Cell1< / div>
< / div>
< div class =table-cell>
< div class =kuva> Cell2< / div>
< / div>
< div class =table-cell>
< div class =kuva> Cell3< / div>
< / div>
< div class =table-cell>
< div class =kuva> Cell4< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
删除
float：left;
从
.table-cell
On a webpage I have a container div and inside it two divs next to each other. In the first inner div I am trying to set up a CSS table that has 4 columns that evenly fill the div.
The problem I am having is that the cells seem to get their width relative to the page's width, not the table/it's parent div. If I decrease the width from 25% to something lower, it will fit, but if I scale the page, they will still wrap, as the div on the right hits the rightmost table cell.
How should I setup the layout to keep them inside the div?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body, div {
display: block;
height: 100%;
width: 100%;
}
#container {
position: absolute;
height: 300px;
width: 100%;
}
.sideBySide {
position: absolute;
float: left;
height: 100%;
}
#galleria {
background-color:#0C0;
left: 0px;
right: 300px;
width: auto;
}
#tagit {
background-color: #099;
right: 0px;
width: 300px;
}
#table {
position: absolute;
margin: 0px;
padding: 0px;
display: table;
height: 100%;
width: 100%;
}
.table-row {
position: relative;
margin: 0px;
padding: 0px;
display: table-row;
width: 100%;
height: 25%;
}
.table-cell {
position: relative;
margin: 0px;
padding: 0px;
display: table-cell;
float: left;
height: 100%;
width: 25%;
padding: 20px;
}
.kuva {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="galleria" class="sideBySide">
<div id="table">
<div class="table-row">
<div class="table-cell">
<div class="kuva">Cell1</div>
</div>
<div class="table-cell">
<div class="kuva">Cell2</div>
</div>
<div class="table-cell">
<div class="kuva">Cell3</div>
</div>
<div class="table-cell">
<div class="kuva">Cell4</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Remove
float: left;
from
.table-cell
这篇关于一个CSS表在并行div之一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
