Question

我正在某种程度上尝试学习CSS。我有以下代码，在调整徽标和表格样式的大小时会溢出表格。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto; /* auto auto; */
                background-color: #2196f3;
                padding: 10px;
            }
            .grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.8);
                padding: 20px;
                font-size: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Grid Elements</h1>

        <p>
            A Grid Layout must have a parent element with the
            <em>display</em> property set to <em>grid</em> or
            <em>inline-grid</em>.
        </p>

        <p>
            Direct child element(s) of the grid container automatically becomes
            grid items.
        </p>

        <div class="grid-container">
            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>

            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
        </div>
    </body>
</html>

使用3个新设置在某种程度上修复了我的问题：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grid-container {
                display: grid;
                grid-template-columns: auto; /* auto auto; */
                background-color: #2196f3;
                padding: 10px;
            }
            .grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                border: 1px solid rgba(0, 0, 0, 0.8);
                padding: 20px;
                font-size: 30px;
                text-align: center;

                /* Addeed */
                overflow: hidden; /* NEW */
                min-height: 0; /* NEW */
                min-width: 0; /* NEW; needed for Firefox */
            }
        </style>
    </head>
    <body>
        <h1>Grid Elements</h1>

        <p>
            A Grid Layout must have a parent element with the
            <em>display</em> property set to <em>grid</em> or
            <em>inline-grid</em>.
        </p>

        <p>
            Direct child element(s) of the grid container automatically becomes
            grid items.
        </p>

        <div class="grid-container">
            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>

            <div class="grid-item">
                <img
                    src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
                    alt="DefaultAlternativeText"
                    width="DefaultWidth"
                    height="DefaultHeight"
                />
            </div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
            <div class="grid-item">7</div>
            <div class="grid-item">8</div>
            <div class="grid-item">9</div>
        </div>
    </body>
</html>

现在没有溢出，第一个图像居中对齐，第二个图像被剪切。没关系。

我的问题：

如何调整图像大小以适应尺寸？
该解决方案是否适用于该网格内的其他类型的数据？我打算使用http://datatables.net并将表格放在该网格中。我想确保表格可读且不会溢出。
是否有一种方法可以防止网格项超出特定大小？就像如果数据表需要一定的大小，并且用户以较小的大小打开它一样，我希望将滚动条的底部/顶部打开然后将其弄坏。
有grid-template-columns: auto;我要添加更多auto auto auto以获取更多列。这样的方式是：当有一定大小时，它是3列，但是当它减小时，它变成2列，然后在最小时变成1列。如何以一种最有效的方式实现这一目标，而又不需要我一直在改变事情。
是否有办法阻止浏览器进一步调整大小（使其更小）？我想停止用户调整浏览器的大小，使内容可读。

Answer 1

您可以通过在图像中添加<meta name="viewport" content="width = divice-width, initial-scale = 1.0">来调整图像大小 <head></head>部分，以及CSS部分中的img { max-width: 100%; height: auto; }。
创建表时要小心，这些表在目标视图中使用最小的格式。使用“ 1000px”的表格宽度是行不通的，但是“ 100％”可以解决这些问题。
是的，就像您有min-width设置一样，您也可以指示max-width设置。
现在，您的<div>的全部堆叠在一起。如果您有2或3个并排，则可以将它们包装在“容器”或“行”中，并为每个列的CSS添加float: left;。它们应该折叠在彼此之间，具体取决于查看者屏幕的大小。
将min-height和min-width的设置从“ 0”更改为所需的大小。

哇！这就是一切吗？

CSS自动调整网格项目的大小

1 个答案: