Question

我目前正在努力解决棘手的CSS问题，因为我无法解决。我想构建一个 img （两行两对二）控制器，可以显示：

全尺寸的左上角图片，
右上角的 overflow-x：滚动（或自动等），
溢出-y中的左下角：滚动（...），
右下角。

有点像Excel修复列/行功能。

我的HTML：

    <div id="global">
        <div id="feature-container">
            <div id="feature-head">
                <img id="feature-t-l" src="..." alt="..."/>
                <img id="feature-t-l" src="..." alt="..."/>
            </div>
            <div id="feature-body">
                <img id="feature-b-l" src="..." alt="..."/>
                <img id="feature-b-r" src="..." alt="..."/>
            </div>
        </div>
    </div>

我的CSS：

    html {
      height: 100%;
    }
    html body {
      height: 100%;
      margin: 0 8px 0 8px;
      background-color: darkgrey;
    }
    html body h1 {
      height: 10%;
      width: 100%;
      margin: 0;
      padding-top: 2%;
      box-sizing: border-box;
      text-align: center;
    }
    html body #global {
      height: 90%;
      width: 100%;
      max-width: 100%;
      padding: 0% 2.5% 5% 2.5%;
      box-sizing: border-box;
    }
    html body #global #feature-container {
      height: 100%;
      width: 100%;
      background-color: white;
    }
    html body #global #feature-container #feature-header {
      width: 100%;
      white-space: nowrap;
    }
    html body #global #feature-container #feature-header > img {
      vertical-align: bottom;
    }
    html body #global #feature-container #feature-header img#feature-t-l {
      overflow-x: scroll;
    }
    html body #global #feature-container #feature-body {
      width: 100%;
      white-space: nowrap;
    }

目前，左上角的 img 未被裁剪。即使 #global 上的 max-size ，左上角的 overflow-x 也是如此。可以在不使用px 的情况下解决此？

编辑：感谢Fausto NA，JSFiddle。在我的项目中，两个顶部的 img 位于同一条线上，头部和身体之间没有空白。

Answer 1

答案简短：不。正如this post所解释的那样，您需要设置DIV的宽度或高度，否则它将自动调整为其IMG子项。此外，如果您希望每个IMG都有自己的滚动，您需要在每个IMG周围放置一个滚动DIV。

答案很长：你应该回顾一下你对CSS的理解。 html body #global #feature-container #feature-container表示“将此样式应用于#feature-container，该#feature-container是另一个#global的间接子项，是#feature-container的间接子项，这是间接的...并且您没有#feature-container这是另一个img#feature-container的孩子。还有其他CSS规则与HTML中的任何内容都不匹配，例如DECLARE @BUG_ID_SIT_CNT AS INT = (SELECT COUNT(BUG.BG_BUG_ID) FROM BUG WHERE BUG.BG_USER_02 = 'SIT') DECLARE @BUG_ID_UAT_CNT AS INT = (SELECT COUNT(BUG.BG_BUG_ID) FROM BUG WHERE BUG.BG_USER_02 = 'UAT') SELECT @BUG_ID_SIT_CNT/(@BUG_ID_SIT_CNT + @BUG_ID_UAT_CNT)。

结论：这是怎么回事？

https://jsfiddle.net/xve5jakh/1/

棘手的CSS：没有直接容器的裁剪图像

1 个答案: