gpt4 book ai didi

html - 如何让我的两个表彼此对齐?

转载 作者:太空宇宙 更新时间:2023-11-03 22:44:11 24 4
gpt4 key购买 nike

我无法让我的两个表格彼此相邻对齐。第二个蓝色盒子(较小的盒子)一直位于第一个盒子下方。我尝试在每个元素上使用“display: inline-block”和“float: left”,但没有任何反应。请帮忙?

#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}

#table-12 tr {
display: inline-block;
}

.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}

#table-34 tr {
display: inline-block;
}
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Problem.css">
</head>

<body>

<!-- big table -->
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>

<!-- tables 1 & 2 -->
<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>

<!-- tables 3 & 4 -->
<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>

</body>

</html>

最佳答案

像这样?

.wrapper {
background-color: red;
}

#zero-table,
#table-12,
#table-34 {
float: left;
}

#zero-data {
border: 1px solid black;
height: 200px;
width: 200px;
text-align: center;
}

.data-1234 {
border: 1px solid blue;
width: 95px;
height: 95px;
text-align: center;
}
<div class="wrapper">
<table id="zero-table">
<tr id="zero-row">
<td id="zero-data">0</td>
</tr>
</table>

<table id="table-12">
<tr id="row-1">
<td class="data-1234">1</td>
</tr>
<tr id="row-2">
<td class="data-1234">2</td>
</tr>
</table>


<table id="table-34">
<tr id="row-3">
<td class="data-1234">3</td>
</tr>
<tr id="row-4">
<td class="data-1234">4</td>
</tr>
</table>
</div>

关于html - 如何让我的两个表彼此对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42776633/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com