gpt4 book ai didi

html - flex 盒中的 flex 盒,定位不起作用。 ( flex 盒中的 flex 盒)

转载 作者:太空宇宙 更新时间:2023-11-04 03:02:57 28 4
gpt4 key购买 nike

更新

对于那些不喜欢内联 CSS 并想要类的人,这里有另一个带有类和样式表的 jsFiddle

更新结束

我想做一个产品页面。它将包含三列。第一个是图片,第二个是一些规范,第三个是“入篮”。所有列的内容都是动态的,所以我永远不会知道什么是更高的,什么是它的大小。

我尝试做的是:

  • 将三个列的高度都设为最高列的高度。
  • 在第二列中,我需要在方框顶部显示产品规范(现在是 lorem ipsum),在方框底部显示一些信息。 (123456)。

因此,我使用 flexbox 技术 制作了三列,并且如我所料,它起作用了。 (因为这将是响应式的,稍后我需要更改指定宽度的 3 列的顺序,但现在不相关)。

好吧,我想,如果我将另一个 flex div 放入第二列,但现在使用列模式,它就可以完成这项工作。

但不是。我不明白,为什么第二列的第二个 flexbox 高度不如列高,(我很伤心 strech,和 justify-content: space-between)

我也应该为第 3 列这样做。

我使用了内联样式表,也许它是可读的。

它只适用于 FF 和 IE,但不适用于 Opera 和 Chrome。

<!DOCTYPE html>
<html>
<head>
<title>Flex teszt</title>
<style>
p {margin-bottom: 17px;}
</style>
</head>
<body style="padding: 0; margin: 0;">
<!-- Big and first flex container -->
<div style="width: 1000px; margin: 0 auto; border: 1px solid #000; box-sizing: border-box;">
<div style="display: flex; flex-wrap: nowrap; justify-content: space-between ; flex-direction: row; align-items: stretch; width: 100%; box-sizing: border-box; border: 1px solid #f00">
<div style="width: 32%; box-sizing: border-box; order: 1; border: 1px solid #f00;">
<img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
</div>

<div style="width: 32%; box-sizing: border-box; order: 2; border: 1px solid #0f0; box-sizing: border-box;">
<div style="height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; width: 100%; box-sizing: border-box;">
<div style="border: 1px solid #00f; width: 100%; order: 1" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div style="border: 1px solid #00f; width: 100%; aling-self: flex-end; box-sizing: border-box; display: block; order: 2">123456</div>
</div>
</div>

<div style="width: 32%; box-sizing: border-box; order: 3; border: 1px solid #f0f; box-sizing: border-box;">
789
</div>
</div>
<!-- /big and first flex container -->
</div>
</body>
</html>

这是 jFiddle 链接。

有人可以帮我解决这个问题吗?

最佳答案

  • .secondCol .innerFlex 中移除 height: 100%;,它的容器没有设置高度,所以浏览器不知道 100% 应该有多高
  • 添加 display: flex; .secondCol 这将允许 .innerFlex 填充其可用高度

body {
padding: 0;
margin: 0;
}
p {
margin-bottom: 17px;
}
.wrapper {
width: 1000px;
margin: 0 auto;
border: 1px solid #000;
box-sizing: border-box;
}
.flexContainer {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
flex-direction: row;
align-items: stretch;
width: 100%;
box-sizing: border-box;
border: 1px solid #f00
}
.firstCol {
width: 32%;
box-sizing: border-box;
order: 1;
border: 1px solid #f00;
}
.secondCol {
display: flex; /*Add this*/
width: 32%;
box-sizing: border-box;
order: 2;
border: 1px solid #0f0;
box-sizing: border-box;
}
.secondCol .innerFlex {
/*height: 100%; Remove this*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
.secondCol .innerFlex .firstItem {
border: 1px solid #00f;
width: 100%;
order: 1
}
.secondCol .innerFlex .secondItem {
border: 1px solid #00f;
width: 100%;
aling-self: flex-end;
box-sizing: border-box;
display: block;
order: 2
}
.thirdCol {
width: 32%;
box-sizing: border-box;
order: 3;
border: 1px solid #f0f;
box-sizing: border-box;
}
<div class="wrapper">
<div class="flexContainer">
<div class="firstCol">
<img src="http://vaso.hu/venus.jpg" style="width: 100%;" alt="">
</div>

<div class="secondCol">
<div class="innerFlex">
<div class="firstItem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="secondItem">123456</div>
</div>
</div>

<div class="thirdCol">
789
</div>
</div>
<!-- /big and first flex container -->
</div>

关于html - flex 盒中的 flex 盒,定位不起作用。 ( flex 盒中的 flex 盒),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30999371/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com