个人中心
gpt4 book ai didi

html - 在静态 flex 列中安装所有内容

转载 作者：太空宇宙 更新时间：2023-11-04 05:38:15 26 4
gpt4 key购买 nike

我试图在非滚动列 flexbox 的 View 边界内放置 4 个 div，但我似乎无法让它工作。

我想要的: enter image description here

我的经历: enter image description here

我不知道我在做什么，只是随机排列与 flex 相关的 CSS 字段来尝试修复它哈哈。如果有人能指出问题所在，我会永远爱你。

这是我的代码的要点:

body {
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontent {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#header #firstContent #secondContent {
  flex: 1 1 auto;
}
#header {
  background-color: green;
      font-weight: 700;
    align-content: center;
    font-size: 7rem;
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture {
  background-color: blue;
  flex: 0 1 auto;
}
<body>
  <div id="flexcontainer">
    <div id="header">Title</div>
    <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
    <div id="firstContent">first</div>
    <div id="secondContent">second</div>
  </div>
</body>

最佳答案

试试下面这个。并使用 object-fit如果图像未按预期扩展或收缩或纵横比发生变化。

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  flex: 1;
  min-height: 0;
}

body {
  margin: 0;
}

img {
  object-fit: contain;
  height: 100%;
  width: auto;
}
<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

关于html - 在静态 flex 列中安装所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59440926/

26 4 0
文章推荐： c - 为什么指针 char 数组最后不会自动获取 NULL？
文章推荐： linux - bash 文件 Linux Ubuntu
文章推荐： c - snprintf() c 中的段错误
文章推荐： linux - AWK 命令在 linux 中不起作用，但在 mac 中起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com