gpt4 book ai didi

html - 用百分比值声明的表中的内容破坏了表

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

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

我希望表格保持原样(左侧尺寸为 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 中,我无法将其更改为百分比)

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

谢谢!

最佳答案

表格不适用于布局。正如在对您的问题的评论中所述,如果您只使用 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>​

关于html - 用百分比值声明的表中的内容破坏了表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12990927/

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