8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 元素无法垂直调整大小的问题

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

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） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    @Sam Sabin，谢谢你的链接！我不太常用 Slack，仍然不知道如何正确格式化我的问题。此外，我最终自己解决了这个问题（父 div 导致了问题），但现在我又遇到了更多问题需要解决……如果我需要再问一个问题，我一定会尝试制作一个可重现的示例。谢谢你的赞美！！！我需要这个 :D

  • 引用 3楼

    我正在使用移动优先方法构建网站布局，然后使用媒体查询获取笔记本电脑宽度：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;
    }
}
  • 引用 4楼

    你已经接近了！默认情况下，弹性容器的方向是从左到右。你需要将其设置为从右到左（ 反向 ）。添加 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>
  • 引用 5楼

    哇！一行代码就搞定了。谢谢您的帮助，先生/女士 :) 我现在要将其添加到我的代码中。

  • 引用 6楼

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

  • 引用 7楼

    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>
返回
作者最近主题：