Question

我可能会问一个重复的问题。我搜索了SO，没有任何接近我的问题，也没有找到任何有用的答案。我在CSS世界中相对较新，所以任何帮助都会受到赞赏。

我在容器内有两个div，我想并排放置。在第二个div中，我放置了一个不固定的图标。如果满足某些条件，则该图标将隐藏。另一个要求是，当窗口缩小时，我希望显示两个元素并优选缩小div1并使图标保持完整且大小相同，以便两者都可见。

<div class="main-container">
            <div class="div1"></div>
            <div class="div2"></div>
</div>

以下CSS为我工作并满足我的所有要求，但因为flex而无法使用IE10。

.main-container
{
    display: flex;
}

.div1
{
    position: relative;
    border: 1px solid <#=styles["subduedBorderColor"]#>;
    background-color: <#=styles["controlBackgroundColor"]#>;
    height: 24px;
    padding: 3px;
    margin: 6px 2px 0 16px;
    width: 100%;
}

我在这里尝试了另一种方法，但div1有一个固定的大小，当图标不存在时看起来很糟糕。我希望div1在没有图标时占据整个空间。

.main-container
{
    white-space: nowrap;
    width: 100%
}

.div1
{
    position: relative;
    border: 1px solid <#=styles["subduedBorderColor"]#>;
    background-color: <#=styles["controlBackgroundColor"]#>;
    height: 24px;
    padding: 3px;
    margin: 6px 2px 0 16px;
    width: 85%; /* fallback if needed */
    width: calc((100%) - 50px);
    display: inline-block;
}

.div2
{
    display: inline-block;
}

我从昨天起就在苦苦挣扎，非常感谢你们的任何帮助。

Answer 1

尝试给容器一个相对位置，然后将两个div放在绝对位置，参见JSFIDLE

.main-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.div2 {
  position: absolute;
  left: 50%;
  background: blue;
  min-height: 100vh;
  width: 50%;
}

.div1 {
  position: absolute;
  left: 0;
  background: red;
  min-height: 100vh;
  width: 50%;
}

Answer 2

以下css在IE10上为我工作，请参阅我为IE10添加的后备。我知道这对于旧的IE不起作用，但只要它适用于IE10 +，Chrome和Firefox，我就可以了。

.div1
{
    position: relative;
    border: 1px solid <#=styles["subduedBorderColor"]#>;
    background-color: <#=styles["controlBackgroundColor"]#>;
    height: 24px;
    padding: 3px;
    margin: 6px 2px 0 16px;
    -ms-flex: auto; /* IE 10 */
    flex: auto;
}

.main-container
{
    display: -ms-flexbox; /* IE 10 */
    display: flex;
}

动态div并排

2 个答案: