代码之家 › 专栏 › 技术社区 › curt

高度:复制到网站时100%停止工作

flexbox css

curt · 技术社区 · 3 年前

我在将div对齐到包装div的底部时遇到了问题,所以我创建了一个代码penexample来测试它。我通过将高度设置为100%来工作。当我将测试代码复制到我的网站时,它停止了工作。然后我尝试使用Chrome和Firefox。效果很好。它只在狩猎中失败。知道是什么把它弄坏了吗?当它不起作用时,绿色的div与上面的div相对。

我的目标是让绿色div与底部齐平,如测试中所示。任何其他方法都可以。在解决这个问题之前,我尝试了很多不同的方法。

.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%
}
.mf6 {flex: 0 0 50%;}

.theme-split-1 { background-color: #a7ef76; color: black }

<div class="flex-row">
  <div class="mf6" style="border-bottom: 6px solid black">
    <div class="flex-col" style="border-bottom: 6px solid blue">
      <div class="mf6">
        <p>Our students set the bar</p>
      </div>

      <div class="mf6 theme-split-1" style="align-self: stretch">
        <p>Programs such as </p>
      </div>
    </div>
  </div>

  <div class="mf6">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
</div>

1 回复 | 直到 3 年前

ed2 3 年前

对于 第一部分 对于你的问题,确保绿色div与你想要的对齐,答案是确保你的CSS在生产中按照你认为的方式工作。

以下是如何做到这一点:

如果某个上下文覆盖了你的CSS,或者在你的CSS源加载之后又有另一个CSS源加载,你可以通过在浏览器中使用devtools检查元素来找出是什么破坏了它。

它将显示应用CSS的层次结构,您将能够查看和测试覆盖CSS示例的内容,并找到源代码。

检查flex行和flex列之间的插入DIV(类MF6),可能需要将flex列作为flex行的直接后代。

此外,还有一些可能有用的旁注:

你有一些内联的CSS,根据你的具体情况,它们也可以更好地与类一起使用
退房 flex-end

为了你的 第二期 (不在Safari上工作),答案是确保你拥有所有 -webkit 所需前缀:

你可能需要一个 -网络工具包 如果您在其他地方获得结果,但在safari中没有,请在其中的某个位置添加前缀。
你以前需要 display: -webkit-flex; 来增强你的 display: flex; ,不确定情况是否仍然如此。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前