css – 按DIV元素布置表格

我很感兴趣如何创建一个像div一样只使用div元素的表格.我读了很多关于display和float style属性的内容,我认为这段代码应该按照我的要求布局内容,但我看到一个表格,第二行移动到下面的一个位置.

我希望看到：

left1 right1
left2 right2

但我知道

left1 
left2 right1
      right2

这是我的CSS

.big {
    display: inline-block;
}

.small {
    display: block;
}

.left {
    display: inline;
}

.right {
    display: inline;
    float: right;
}

在这里我的html文件：


我设法创建表(将规则宽度：100px添加到.small选择器)但我不想指定我的DIV元素的宽度,因为它们可以具有不同的宽度.
谢谢


最佳答案
如果它是真正的表格布局,那么使用html表是合适的.如果它不是真正的表格布局,那么如果要保持HTML不变,这就是CSS中所需的内容：

.small {float:left; clear: both;}
.left {float:left: clear: both;}
.right {float:left;}

“清楚：两者”有点像回车(对于所有有记忆的打字机的人来说都是！)
“float：left”将东西水平放置在彼此旁边而不是框元素的自然垂直堆叠(如div).
对于我自己的table-ish CSS布局,我只使用两个类,“row”和“column”,如下所示：

/* Standard CSS for div tables.  By Tom Haws
 * Overview:
 * 1. a row is a Box element that wants all its children to be
 *    arranged in a (horizontal) row
 *    and is itself a new line rather than a continuation of a line.
 * 2. a column is a Box element that wants all its children to be
 *    arranged in a (vertical) column
 *    and is itself a continuation of a line unless it is 
 *    the first column in a row.
 * 
 * */
/* Any child of a row AND any column class that is anything but first-child 
 * represents another column continuing the same row 
 * */
.row>*,.column
{
    float: left;
}
/* Every first child of a row and every column that is a first child of any parent 
 * represents a new row (first column) 
 * */
.row>*:first-child,.column:first-child 
{
    clear: both; 
    float: left;
}
/* All rows and all children of a column are a new line.
 * */
.row,.column>*
{
    clear: both;
    float: left;

}

这是我如何做你的小例子：


随意询问有关CSS标记的细微差别以及它正在做什么的任何后续行动.

css – 按DIV元素布置表格

相关文章