html - 我是否被迫使用嵌套表格进行布局以缩放文本区域？(包括示例 html)-6ren

html - 我是否被迫使用嵌套表格进行布局以缩放文本区域？(包括示例 html)

转载作者：太空宇宙更新时间：2023-11-04 16:00:06

我正在建立的网站要求随着分辨率的提高而增加文本区域的大小。
我尝试使用 float 和非 float div 来执行此操作，但在每种情况下，到目前为止我都尝试过 div 对齐得很好，但我无法控制文本区域的大小。
然而，除了 1 即兼容性问题，标准表确实提供了开箱即用的功能。

以下代码在 firefox 和 ie(quircks 模式)
标准 ie 中按预期工作，即无法调整文本区域的高度。
我不介意一些开箱即用的想法，它不必是表格 div 或其他任何东西，只要它能完成工作即可。
我知道 javascript 可以进行一些分辨率计算，但对于简单的布局问题，该解决方案感觉有点太复杂了。在我看来，代码越简单、越少越好。

<!DOCTYPE html>
<html>
<body>
<table style="width: 100%">
<tr>
    <td style="width: 300px">
        <table class="clsDataGrid" width="100%" height="350px">
            <tr style="height:350px;background-color:blue;">
                <td style="height:350px">test</td>
            </tr>
        </table>
        <br/>      
        <table width="100%">
           <tr>
                <td style="background-color:red;height:100px">test</td>
            </tr>
        </table>
    </td>

    <td style="padding-left : 1em;height: 100%">
        <table class="clsDataGrid" style="width: 100%;height: 100%">
            <tr>
                <th>Description</th>
            </tr>
            <tr>
                <td style="height: 100%">
                    <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
                </td>
            </tr>
        </table>
    </td> 
    </tr>
</table>
</body>
</html>

最佳答案

好的，所以解决方案 3 - 不使用 js - 你必须去表。请注意我是如何强制添加描述标签的——这是一个错误修复，而不是我是个白痴。

<!--Solution 3-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body {padding:0; margin:0;}
    table td {vertical-align: top;}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td style="height:350px; background-color:blue; color:white; padding:0 24px;">
            Blue Test
        </td>
        <td rowspan="2" style="padding:31px 24px 0; position:relative; height:100%">
                <label style="position:absolute; top:0; left:24px;">Description</label>
                <textarea style="resize: none; width:100%; height:100%;">DATAAAAA</textarea>
        </td>
    </tr>
    <tr>
        <td style="height:100px; background-color:red; color:white; padding:0 24px;">
            Red Test
        </td>
    </tr>
</table>
</body>
</html>

对于类似的事情，有很多解决方案 - 这里有两个是我头脑中的 - 一个供你开始的地方 - 我没有测试过跨浏览器。

希望他们有所帮助。

<!--Solution 1-->
<!DOCTYPE html>
<html>
<body>
<div style="display:table; width:100%">
    <div style="display:table-cell; width:30%;">
        <div style="height:350px; background-color:blue; color:white; padding:0 24px;">
            Blue Test
        </div>
        <div style="height:100px; background-color:red; color:white; padding:0 24px;">
            Red Test
        </div>
    </div>
    <div style="display:table-cell; vertical-align:middle">
        <div style="padding:0 24px;">
            <span>Description</span>
            <textarea style="resize: none; width:100%;height: 100%">DATAAAAA</textarea>
        </div>
    </div>
</div>
</body>
</html>

<!--Solution 2-->
<!DOCTYPE html>
<html>
<body>
<div style="width:100%">
    <div style="display:inline-block; width:30%;">
        <div style="height:350px; background-color:blue;">
            Blue Test
        </div>
        <div style="height:100px; background-color:red;">
            Red Test
        </div>
    </div>
    <div style="display:inline-block; width:69%">
        <span>Description</span>
        <textarea style="resize: none; width:99%;height: 100%">DATAAAAA</textarea>
    </div>
</div>
</body>
</html>