1

我有一个<table>设置为 100% X 100% http://oxide.co.il/test/table1.htm的 html 页面。我使用它是因为我需要页面全屏并适合所有类型的屏幕，而且页面不应该有滚动。

我希望表格保持原样（左侧 50%，右侧 50%，底部 10%），但是当我向表格中添加内容时，表格会重新调整其大小，这对我不利。

例如，当我添加一个大图像时，它看起来像这样： http: //oxide.co.il/test/table2.htm（右侧更小，底部消失）

我希望图像适合<td>原始尺寸。当我style="width:100%;"为图像添加时，它仍然打破了表格： http: //oxide.co.il/test/table3.htm（底部区域未显示）

当我有一个大<div>的里面时<td>，它也会打破桌子： http: //oxide.co.il/test/table4.htm（我知道<div>在里面px，我不能把它改成百分比）

如何在不重新调整大小的情况下使内容适合表格？

谢谢！

4

1 回答 1

0

表格不适用于布局。正如您对问题的评论中所述，如果您只使用 div，它会变得更加简单。下面的代码做你想做的事，没有表格：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
        <style>
            html, body{
                margin: 0;
            }

            .container {
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .span50 {
                width: 50%;
            }

            .span100 {
                width: 100%;
            }

            .sheer90 {
                height: 90%;
            }

            .sheer10 {
                height: 10%;
            }

            .span50, .span100,
            .sheer90, .sheer10 {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="span100 sheer90">
                <div class="span50">
                    <img src="http://placehold.it/1200x1200" width="1200px" height="1200px" alt="" />
                </div>
                <div class="span50"></div>
            </div>
            <div class="span100 sheer10">
                Test
            </div>
        </div>
    </body>
</html>​
于 2012-10-26T18:26:59.577 回答