Fatal编程技术网
  • html/
  • 折叠TD宽度HTML

折叠TD宽度HTML

html css

折叠TD宽度HTML,html,css,Html,Css,我有HTML，例如： <html> <body> <table> <tr> <td> <img style="width: 300px; height: 300px;"></img> <img style="width: 300px; height: 300px;"></img>

我有HTML，例如：

<html>
    <body>
        <table>
            <tr>
                <td>
        <img style="width: 300px; height: 300px;"></img>
        <img style="width: 300px; height: 300px;"></img>
                </td>
                <td>
                    hello world
                </td>
            </tr>
        </table>
    </body>
</html>


你好，世界
当页面/窗口宽度减小时，第二个图像被推到第一个图像的下方

我的问题是：为什么TD单元在图像堆叠时不缩小到300宽？它似乎保持了不必要的大-造成了一个丑陋的差距之间的图像和文本的下一个单元格。有没有办法根据空间大小强制单元格宽度为600或300？

您可以添加
style='white-space:nowrap；'到
td
元素以防止缠绕


我的简短回答是停止使用表格，转而使用响应性强的div布局


<div class='con'>
    <div class='picture_con'>
        <img src='img1.jpg'></img>
        <img src='img2.jpg'></img>
    </div>
    <div class='text_con'>
        Your text here
    </div>
</div>


对于大屏幕来说这一切都很好，但现在我们需要处理较小的屏幕。为此，我们使用@media css查询


@media(max-width:600px) {
    .con .picture_con {
        width:300px;
    }
    .con .picture_con img {
        display:block;
    }
}


编辑：如果确实需要表格

下面是一个响应表设计的示例，它也可以完成这项工作


将图像标签的宽度去掉。首先在css中添加它们

表img{最大宽度：100%；}


但是，是的，你最好能让它反应灵敏。这在桌子上是可能的。阅读本文：
要理解示例中表布局的行为，需要查看
CSS用于可视化布局表格的表格宽度算法：



表格宽度算法查看组成每列和每行的单元格中的内容
确定列宽的最小值和最大值。然后，该算法进行尝试
考虑到任何指定的列宽，为每列分配足够的空间
值、指定的表宽度等

在这种情况下，浏览器尝试为第二列中的文本分配600px（加上两个图像之间的空白位）和一些宽度

如果窗口足够宽，则所有内容都可以放在每个表单元格的一行中

但是，随着窗口宽度的缩小，算法将缩小每个列宽（此处的详细信息因浏览器而异，因为CSS规范没有规定详细算法）

该算法似乎是按比例收缩每一列。对于第一列，这将强制图像以右侧的间隙环绕。在这种情况下，算法
不进行第二次传递以重新分配多余的空间。算法运行得很好
如果你是包装词。但是，当内容是300px宽的图像时
结果是巨大的（丑陋的）差距

因此，该表工作正常，但结果并不理想

表宽度算法试图通过最小化它的次数来提高效率
在内容中循环以确定宽度和高度。在这种情况下，一个更
为了得到更令人愉快的结果，需要复杂的算法，但它也会
有点主观

注意：要解决布局问题，您必须构建一个JavaScript函数来执行
计算列宽的数学公式。我认为这可能很难做到

它是万无一失的。
这样就完全停止了图像的包装。我希望图像仍然换行，但TD从600跳到300，而不是随着页面宽度的减小慢慢缩小到300。@MarcAudet oops，一定是复制了错误的链接。现在修好了。谢谢

@media(max-width:600px) {
    .con .picture_con {
        width:300px;
    }
    .con .picture_con img {
        display:block;
    }
}