jquery - 并排动态div

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%;
}