按DIV元素布置表格

Question

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

我希望看到:

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文件:

<div class="big">
<div class="small">
    <div class="left">left1</div>
    <div class="right">right1</div>
</div>
<div class="small">
    <div class="left">left2</div>
    <div class="right">right2</div>
</div>

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

谢谢

Answer 1

如果是真正的表格布局，那么使用 html 表格是合适的。如果它不是真正的表格布局，并且要保持 HTML 不变，则 CSS 中需要以下内容：

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

“clear：both”有点像回车（叮！对于所有有打字机记忆的人来说）“float：left”将东西水平地彼此相邻，而不是盒子元素（如div）的自然垂直堆叠。

对于我自己的表格 CSS 布局，我只使用两个类，“行”和“列”，如下所示：

/* 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;

}

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

<div class="row">
    <div>left1</div>
    <div>right1</div>
</div>
<div class="row">
    <div>left2</div>
    <div>right2</div>
</div>

请随意询问任何有关 CSS 标记的细微差别及其作用的后续问题。