Question

我已经查看了其他问题，但没有人回答我在这里寻找的问题。我需要的要求：

三栏两排标题行所有文字都与顶部对齐

我目前的代码：

<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>

但这看起来如何就像一张桌子。一，文本没有像顶部那样对齐顶部。其次，第三个盒子实际上是向下的，几乎就像它完全是另一条线。

在查看其他一些问题时，我尝试了其他一些技巧，比如使用顶部，对齐顶部等，但是没有一个能够成功地与顶部对齐。我还尝试删除p标签，认为它们可能会使解释器混淆盒子的位置;没有成功。目前的外观 - 这是不正确的，如：

文字1 |文字2

空白|文字3

应该看起来像：

文字1 |文字2 |文字3

Answer 1

实际上，当你使用div而不是table时，你不明白你需要什么。

我使用下面的display: table使div的行为与表格相似。以下是您的期望吗？

.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

如果你想要它看起来＆＃39;就像表格display:table上使用.major以及使用divs内所有display:table-cell一样，并移除floats和widths

你的HTML也不正确。你有一个</div>关闭的错误

请参阅以下代码段：

让我知道它是否有帮助。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

与三列的两行表使用Divs

3 个答案: