8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

元素无法垂直调整大小的问题

Orace 3月前

93 0

我正在制作一个网站布局,使其看起来像旧的 Windows95 绘画窗口,并且在使画布“窗口”可调整大小时遇到​​了一个问题。它可以水平工作,但不能垂直工作。c...

我正在制作一个网站布局,使其看起来像旧的 Windows95 绘画窗口,并且在使画布“窗口”可调整大小时遇到​​了一个问题。它可以水平工作,但不能垂直工作。画布不会超出我为其指定的最小高度,我不知道如何让它工作。是因为 resize 属性附加到一般绘画窗口,而不是内部画布 div 吗?在这种情况下,我是否需要将可调整大小的类附加到画布,或者有办法解决这个问题?我希望内部 div 水平扩展,就像垂直扩展一样。我使用的代码如下。

#paintbox {
display: inline-block;
position: absolute;
min-width: 628px;
min-height: 446px;
border-right: grey 1px solid;
outline: white 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px #dedfde solid;
border-left: 1px #dedfde solid;
border-bottom: 1px black solid;
background-color: #bdbebd;
z-index: 9;
top:  10px;
left: 0;
}
.resizable {
overflow: hidden;
resize: both;
min-width: 628px;
min-height: 446px;
}

.canvas {
display: block;
position: absolute;
min-width: 463px;
left: 60px;
min-height: 250px;
outline: black 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px #7b7b7b solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px #7b7b7b solid;
background-color: white;
color: black;
margin-right: 3px;
box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}

我不确定我可能做错了什么,除非是我的 resizable 属性的问题。这是 codepen codepen

我试过调整我能想到的任何 div 的大小和添加不同的位置,但似乎没有什么能给我想要的解决方案 :(

编辑:将高度更改为 %(即 50%)确实会使内部画布改变大小,因为它会调整为我指定的任何 %,但我仍然不明白为什么如果它的高度是像素指定的,它不会改变。宽度会改变,那么为什么高度不会改变?我可以看到外部绘画窗口是否发生了变化,而内部画布保持不变,但事实并非如此,这就是我感到困惑的地方。我只是错过了一些基本的东西吗?

帖子版权声明 1、本帖标题:元素无法垂直调整大小的问题
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Orace在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
  • @Sam Sabin,谢谢你的链接!我不太常用 Slack,仍然不知道如何正确格式化我的问题。此外,我最终自己解决了这个问题(父 div 导致了问题),但现在我又遇到了更多问题需要解决……如果我需要再问一个问题,我一定会尝试制作一个可重现的示例。谢谢你的赞美!!!我需要这个 :D

  • 我正在使用移动优先方法构建网站布局,然后使用媒体查询获取笔记本电脑宽度:1024px 大小。该设计有 11 个项目,并遵循包裹的弹性。所有项目都是数字...

    我采用移动优先的方法构建网站布局,然后使用媒体查询获取笔记本电脑宽度:1024px 大小。该设计有 11 个项目,并遵循包裹的弹性。所有项目都已编号并着色。

    我希望 偶数框 左边 奇数框 右边 。结果却相反,如图 1 所示。我希望有人能解决这个问题,让我看起来像个傻瓜,因为我花了很多时间却无济于事。图 1 :框排列

    /* Mobile First */
    
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .main-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 10px;
    }
    
    .item {
      background-color: #f0f0f0;
      padding: 20px;
      text-align: center;
      flex: 1 1 100%;
    }
    
    .main-content>.item:nth-child(odd) {
      background-color: orange;
    }
    
    .item:nth-child(even) {
      background-color: lightseagreen;
    }
    
    
    /* Laptop Layout */
    
    @media (min-width: 1024px) {
      .main-content {
        justify-content: space-between;
      }
      .item {
        flex: 0 0 48%;
        box-sizing: border-box;
      }
      /* help code goes here */
    }
    <div class="main-content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
    </div>

    我尝试使用 \,#39; order \' 属性,结果将 偶数框 顶部 & 将奇数框翻转 到底。您可以在图 2 中看到结果。 图 2:使用 Order 排列框 ,这不是我想要的。

        .item:nth-child(odd) {
            order: 2;
        }
    
        .item:nth-child(even) {
            order: 1;
        }
    

    我也尝试过使用 网格布局 ,但问题是会产生不必要的间隙。您可以查看图 3,其中网格布局将奇数放在右侧,偶数放在左侧,但 在框号 1 之前有一个空白区域。 图 3:使用网格布局的框排列

    .main-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    ...
    
    /* Laptop Layout */
    @media (min-width: 1024px) {
        .main-content {
            grid-template-columns: 1fr 1fr;
        }
    
        .item:nth-child(odd) {
            grid-column: 2;
        }
    
        .item:nth-child(even) {
            grid-column: 1;
        }
    }
    
  • 你已经接近了!默认情况下,弹性容器的方向是从左到右。你需要将其设置为从右到左( 反向 )。添加 flex-direction: row-reverse .main-content 。见下文。

    /* Mobile First */
    
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .main-content {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      justify-content: center;
      gap: 10px;
      padding: 10px;
    }
    
    .item {
      background-color: #f0f0f0;
      padding: 20px;
      text-align: center;
      flex: 1 1 100%;
    }
    
    .main-content>.item:nth-child(odd) {
      background-color: orange;
    }
    
    .item:nth-child(even) {
      background-color: lightseagreen;
    }
    
    
    /* Laptop Layout */
    
    @media (min-width: 1024px) {
      .main-content {
        justify-content: space-between;
      }
      .item {
        flex: 0 0 48%;
        box-sizing: border-box;
      }
      /* help code goes here */
    }
    <div class="main-content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
    </div>
  • 哇!一行代码就搞定了。谢谢您的帮助,先生/女士 :) 我现在要将其添加到我的代码中。

  • @JavaBongo 任何时候,我很高兴我的回答对您有所帮助!如果它解决了您的问题,请考虑将其标记为已接受。这将帮助其他有同样问题/疑问的人。

  • CSS-Grid grid-auto-flow: column 可以管理这个。

    /* Mobile First */
    
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .main-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-flow: column;
      justify-content: center;
      gap: 10px;
      padding: 10px;
    }
    
    .item {
      background-color: #f0f0f0;
      padding: 20px;
      text-align: center;
      flex: 1 1 100%;
    }
    
    .main-content>.item:nth-child(odd) {
      background-color: orange;
      grid-column: 2;
    }
    
    .item:nth-child(even) {
      background-color: lightseagreen;
      grid-column: 1;
    }
    <div class="main-content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
    </div>
返回
作者最近主题: