两行 Table 三列使用 Div

Question

我查看了其他问题，其中 none 回答了我在这里寻找的问题。我需要的要求：

三列两排 Header 行所有文本都向上对齐

我目前拥有的代码：

<style type="text/css">
.major {
    width:700px;
    height:350px;
    float:left;
}
.one {
    width:220px;
    height:300px;
    float:left;
    top:0px;
}
.two {
    width:220px;
    height:300px;
    margin-left: 240px; 
    top:0px;
}
.three {
    width:220px;
    height:300px;
    margin-left: 480px;
    top:0px;
}
#head {
    font-weight:bold;
    text-align:center;
}
</style>
</head>
<body>

<div class="major"> 
    <div class="one">
    <p id="head">Head One</p>
    <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
    <div class="two">
    <p id="head">Head Two</p>
    <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
    </div>
    <div class="three">
    <p id="head">Head three</p>
    <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
</div>

但这看起来一点也不像 table。第一，文本没有向顶部对齐，如 table。其次，第三个框实际上更靠下，几乎就像是完全不同的线。

在查看其他一些问题时，我确实尝试了一些其他技巧，例如玩陀螺、align-top 等，但其中 none 成功地与陀螺对齐。我还尝试删除 p 标签，因为我认为它们可能会使解释器混淆盒子的位置；没有成功。这个的当前外观 - 这是不正确的是这样的：

Text 1|Text 2

Blank|Text 3

它应该看起来像：

Text 1|Text 2|Text 3

Answer 1

实际上不明白你需要什么，因为你使用的是 div 而不是 table。

我使用下面的 display: table 使 div 的行为类似于 tables。以下是您所期待的吗？

.major {
  display: table;
}
.one {
  display: table-cell;
}
.two {
  display: table-cell;
}
.three {
  display: table-cell;
}
#head {
  font-weight: bold;
  text-align: center;
}

<body>

  <div class="major">
    <div class="one">
      <p id="head">Head One</p>
      <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
    <div class="two">
      <p id="head">Head Two</p>
      <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>

    <div class="three">
      <p id="head">Head three</p>
      <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
  </div>
  </div>

Answer 2

如果你想让它 'look' 像 table 使用 display:table on .major 和所有 divs inside 使用 display:table-cell并删除 floats 和 widths

您的 HTML 也不正确。你 </div> 关错了

请参阅下面的代码片段：

如果有帮助请告诉我。

.major {
    width:700px;
    height:350px;
    display:table;
}
   

#head {
    font-weight:bold;
    text-align:center;

}
.major div { 
    display:table-cell;
    vertical-align:top;
    text-align:center;
    height:300px;
}

<div class="major"> 
    <div class="one">
    <p id="head">Head One</p>
    <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
    <div class="two">
    <p id="head">Head Two</p>
    <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
    <div class="three">
    <p id="head">Head three</p>
    <p>This is text within the body under the head and next to other text that looks like a table.</p>
    </div>
</div>

Answer 3

#tabel1 td{padding:10%; 0%}
tr td:first-child{text-align:right}
tr td:last-child {text-align:left}

<table style="width:100%">
    <tr>
        <td>
            <table id="tabel1" style="width:100%">
                <tr>
                    <td>Lastname</td>
                    <td><select><option>select</option></select></td>
                </tr>
                <tr>
                    <td>Jackson</td>
                    <td><select><option>select</option></select></td>
                </tr>
            </table> 
        </td>

        <td>
            <table style="width:100%">
                <tr>
                    <td>Lastname</td>
                    <td><textarea rows="4" cols="50"></textarea></td>
                </tr>
                <tr>
                    <td>Smith</td>
                    <td><textarea rows="4" cols="50"></textarea></td>
                </tr>
                <tr>
                    <td>Jackson</td>
                    <td><textarea rows="4" cols="50"></textarea></td>
                </tr>
            </table> 
        </td>
    </tr>
</table>

两行 Table 三列使用 Div

Two Row Table With Three Columns Using Divs

html

css

html-table

css-float