html - 响应式 div 扩展到另一个 div

Question

我有一个页面，其中包含一个包含一个 div 的容器，其中还有两个并排的 div。随着 View 变小，我希望右边的 div 消失，左边的 div 占据整个父 div。 我在执行这个时遇到了问题。当我在 div 上尝试绝对位置时，它确实会扩展到父级的填充宽度，但它也会从父级弹出(某种程度上)。当我按照其他地方的建议尝试过渡时，只是没有做任何有用的事情。然后我尝试了 z-index 并将边距更改为 - 但这似乎也没有用。向正确的方向插入会很棒。

    .box {
      background-color: #F28B20;
      border-radius: 5px;
      height: auto;
      margin-bottom: 150px;
      width: 80%;
      display: inline-block;
      box-shadow: 10px 10px 5px #888888;
      background-image: url("../Images/logo_faded_background.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .sidebar {
      float: right;
      width: 29%;
      margin-left: 0;
      margin-right: 3%;
      text-align: left;
      color: #171581;
    }
    .whiteBoxHalf {
      float: left;
      width: 54%;
      background: rgba(255, 255, 255, 0.6);
      border-color: #000000;
      border-width: 1px;
      border-style: solid;
      margin-left: 3%;
      margin-right: 5%;
      margin-bottom: 15px;
      padding: 15px;
    }
@media (max-width: 1019px) {
    .header {
        font-size: small;
    }

.header li a {
    padding: 20px 10px;
}

    .sidebar {
        display: none;
    }

    .whiteBoxHalf {
    width: 95%;
}
}

<div class="box">
  <div class="row">
    <div class="whiteBoxHalf"></div>
    <div class="sidebar"></div>
  </div>
</div>

Answer 1

您可以使用 display:table-row 和 overflow:hidden 来做类似的事情。 <强> Fiddle

.box, .whiteBoxHalf {
    min-width: 300px;
}
.box {
    background-color: #F28B20;
    border-radius: 5px;
    margin-bottom: 150px;
    width: 80%;
    box-shadow: 10px 10px 5px #888888;
    overflow: hidden;
}
.row {
    display: table-row;
}
.sidebar {
    display: table-cell;
    margin-left: 0;
    margin-right: 3%;
    text-align: left;
    color: #171581;
    background: green;
}
.whiteBoxHalf {
    display: table-cell;
    background: rgba(255, 255, 255, 0.6);
    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    margin-left: 3%;
    margin-right: 5%;
    margin-bottom: 15px;
    padding: 15px;
    width: 60%;
    box-sizing: border-box;
}

<div class="box">
    <div class="row">
        <div class="whiteBoxHalf">
            <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque consequat porta. Praesent a odio lorem. Donec scelerisque mauris nibh, ut finibus ipsum semper eget. Praesent dapibus ante et diam condimentum tempus. Vivamus nisl nisl, finibus in neque non, maximus pretium est. In hac habitasse platea dictumst. Quisque dapibus faucibus nisl. Donec vel tincidunt est, blandit imperdiet eros. Integer blandit finibus vestibulum. Mauris vel ante quis neque congue ullamcorper in vitae quam. Morbi pretium elementum ante, eget suscipit enim elementum sit amet. Integer ornare, risus euismod tincidunt lobortis, arcu ligula lobortis lectus, in egestas est quam sed massa. Etiam porta, neque eget cursus gravida, sem nisl convallis erat, ut pharetra felis ex ac odio. Nunc aliquam enim quis nulla auctor suscipit. Maecenas id enim eu purus hendrerit interdum nec id est.
            </p>
        </div>
        <div class="sidebar">
            <p>
Praesent sem tortor, volutpat at volutpat lobortis, luctus eget tellus. Nulla facilisi. Vestibulum sodales mauris non sapien volutpat hendrerit. Curabitur quis vestibulum nulla. Pellentesque justo risus, vestibulum ac ligula eu, interdum lacinia lorem. Sed ornare libero nunc. Morbi vitae fringilla ipsum. Nulla tempor viverra odio eget ultrices. Etiam fermentum erat viverra ex rhoncus, eget lacinia arcu semper. Aliquam lobortis massa ac tincidunt vestibulum. Nam ex ligula, molestie vel luctus eu, pretium quis lacus. Cras tincidunt nisl nec viverra condimentum.
            </p>
        </div>
    </div>
</div>

如果这不是所需的行为，您可能希望使用媒体查询来定位特定的屏幕分辨率，并相应地显示/隐藏侧边栏。示例:

.sidebar {
    display: none;
}
@media (min-width: 800px) {
    .sidebar {
        display: block;
    }
}