代码之家 › 专栏 › 技术社区 › MadBoy

CSS自动调整网格项的大小

css html

MadBoy · 技术社区 · 6 年前

我在某种程度上尝试学习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; 我正在添加更多自动汽车以获取更多的列。当有一个特定的大小时,它是3列,但是当它向下时,它变成2列,当它最小时变成1列。我如何才能以一种最有效的方式实现这一点,而不需要我一直在改变事情。
有没有办法阻止浏览器进一步调整大小(使其变小)?我想停止用户调整浏览器的大小,以使事情可读。

1 回复 | 直到 6 年前

elbrant 6 年前

您可以通过添加 <meta name="viewport" content="width = divice-width, initial-scale = 1.0"> 在 <head></head> 截面图,以及 img { max-width: 100%; height: auto; } 在你的CSS部分。
在创建表时要小心,因为它们使用目标视图中最小的格式。使用“1000px”的表格宽度是行不通的,但是“100%可以解决这些问题。
是的,就像你有一个 min-width 设置,还可以指示 max-width 设置。
现在你的 <div> 所有的东西都堆在一起。如果有2个或3个并排,则将它们包装在“容器”或“行”中,然后添加 float: left; 每个列的CSS。他们应该根据观看者屏幕的大小折叠在一起。
改变 min-height 和 最小宽度 从“0”到所需大小的设置。

唷! 就这些吗?