Question

在我的HTML页面上，我在侧面有两个表，在中心有一个div，其中包含许多元素（文本，图像，列表，ecc）。

我要相对于页面中央部分（div）的高度调整两个表格的高度。

能帮我吗？

这是代码示例

<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE>
.tablaterale {
font-size: 50%;
font-family: Bahnschrift;
color: white;
vertical-align: text-top;
height: inheritated;
} 

.div {
position: relative;
margin-left: 11.4%;
margin-right: 11.4%;
margin-top: 2.2%;
}

.titolo {
font-family: broadway;
font-weight: normal;
color:  yellow;
font-size: 428%;
margin-top: 0.7%;
margin-bottom: -3.2%;
}

</STYLE>
</HEAD>
<BODY bgcolor="blue">

<CENTER>
<H1 class="titolo">
- MY SUPER TITLE -
</H1>
</CENTER>
<TABLE width="10.75%"  border="2" class="tablaterale" align="left" 
bordercolor="yellow"><TR>

</TR><TABLE>
<TABLE width="10.75%"  border="2" class="tablaterale" align="right" 
bordercolor="yellow"><TR>

</TR><TABLE>

<div class="div">
Insert a long text
</div>

</BODY>
</HTML>

Answer 1

您可以将两个表都包装在一个容器中，并将容器display设置为flex。

这是我在jsfiddle上草拟的一个工作示例： https://jsfiddle.net/sb6e7gdh/5/

打开它并试用它来尝试可能的配置。通常，在这里问一个问题时，您会产生这种东西，以便人们可以更好地帮助您。

有关flex的一些文档：

已添加的内容：

现在您已经用一些代码更新了答案，我发现您使用非常特定的设置来定位和调整元素的大小。是的，它们是%单位，比绝对px更具适应性，但这不是解决问题的好方法。

我强烈建议暂停该项目，并熟悉flex的{{1}}或grid定位方法。它将使您能够生成响应速度更快，屏幕更通用的网页，并可以大大提高您的CSS技能。值得付出努力。一两天内，您将能够以更大的能力和能力恢复项目的工作。我知道这一点，因为从CSS开始我也曾经做过类似的工作，并且从更多的项目中学到了东西。

这是完整的代码，以防万一您需要（与jsfiddle相同）：

html

www.abc.com/a/stutransDet.php?sid=23

css

CSS

HTML调整表格的高度

1 个答案: