我很感兴趣如何创建一个像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标记的细微差别以及它正在做什么的任何后续行动.
原文链接：https://www.f2er.com/css/427640.html
