响应div展开另一个div

Question

我有一个容器持有div的页面，并且内部还有两个div。随着视图变小，我希望右边的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; 
    } 
}