将剩余宽度除以两个 div 并在相对推送时隐藏一个 div答案

【问题标题】：Dividing remaining width by two divs and hiding a div upon relative push将剩余宽度除以两个 div 并在相对推送时隐藏一个 div
【发布时间】：2014-03-19 21:07:24
【问题描述】：

（不是重复的，我已经阅读了其他答案）。

HTML

<div id="ultra_div">
    <div id="other_div">HOVER ME</div>
    <div id="btw_which_ones_pink">It is okay for the pink div to be pushed, it's actually as planned</div>
    <div id="to_divide">
        <div id="part_one">this will, inevitably, vary</div>
        <div id="part_two">this width won't vary</div>
</div>
</div>

CSS

#ultra_div{
    width: 300px;
}

#btw_which_ones_pink{
    background-color: pink;
    width: 100px;
    height: 100px;
    position:relative;
    float: left;
}
#other_div:hover{
    width: 320px;
    -moz-transition: width 0.5s ease-out; 
    -webkit-transition:width 0.5s ease-out;
    -o-transition:width 0.5s ease-out;
    transition:width 0.5s ease-out;
}

#other_div{
    color: white;
    width: 100px;
    height: 100px;
     background-color: black;
    position:relative;
    float: left;
}

#to_divide{
    width: 100%;
    display:-moz-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:box;
    height: 150px;
    position:relative;
    background-color:blue;
    z-index: 9;
}

#part_two{
    background-color: yellow;
    right: 0;
    position:absolute;
    width: 100px;
    height: 93%;
    margin: 4px;
}
#part_one{
    background-color:white;
    width:72%;
    margin: 4px;
    height: 93%;
}

你好，我想要的在这里和fiddle中都有描述！ :)

1->粉红色的div被push没问题，其实是按计划进行的

2-> ...但是我不希望蓝色的 div 被按下。我希望粉色 div 隐藏在蓝色 div 后面，而它（蓝色 div）保持相同的“顶部”属性。

所有 div 的位置应该是“相对”的，因为黑色和粉色 div 的高度可能不同，而蓝色 div 的高度取决于它们。因此，使用“相对”，我可以确保蓝色 div 插入方形 div 的正下方，因为它的宽度为 100%；

我之前已经完成了这一切，但是当我尝试完成我的主要目标时，一切都不合适，所以我删除了代码并再次尝试。

3-> 我希望蓝色 div 在宽度上除以两个 div，黄色 part_two 和白色 part_one。第二部分（黄色）是固定的。它的宽度不会变化。问题是蓝色 div 的宽度可能会有所不同。这意味着我想要实现的白色div的宽度，其实就是蓝色div的宽度——黄色div的宽度。不幸的是，到目前为止，这一直是臀部的疼痛，所以我想我会尝试在这里寻求帮助。 纯 CSS

请仅在完成 1,2 和 3 后提交答案。

【问题讨论】：

如果您有多个问题，您应该分别提出。您的第 1 点和第 2 点构成一个问题，而您的第 3 点则完全是一个单独的问题。
@Nit 是，尽管如此，他们都必须一起工作。我之前尝试过，但人们总是最终会更改代码，但它不会像我需要的那样工作。
当您将鼠标悬停在“悬停”黑色 div 上时，您希望粉色 div 出现在蓝色 div 前面吗？
@MarcAudet “我希望粉色 div 隐藏在蓝色 div 后面，而它（蓝色 div）保持相同的“顶部”属性。” .后面，就是……

标签： html css

【解决方案1】：

使用这个 css 规则：

#other_div:hover+#btw_which_ones_pink~#to_divide{
  //your code
}

选择“to_divide”div。

然后，应用你需要的东西。

display: box不存在，正确的是flex

您需要在 hover 状态下更改一些位置和显示（这些规则需要页面的其余部分才能生效，所以我不会浪费时间尝试满足您的要求），但是，为什么不要简单地让 btw_which_ones_pink 显示：无？

    #other_div:hover+#btw_which_ones_pink{
  display: none;
}

【讨论】：