対応するdivを別のdivに展開する

Question

divを保持するコンテナを持つページがあり、その中にさらに2つのdivが並んでいます。ビューが小さくなるにつれて、右側のdivが消えて、左側のdivが親divの全体を占めるようにしたい。 これを実装する際に問題が発生しています。私はdivの絶対位置を試してみると、それは親の塗り幅に展開されますが、親から出てきます（並べ替え）。他の場所で提案されているように私は移行を試みたとき、ただ役に立ちませんでした。それから私はZインデックスを試して、マージンをaに変更しましたが、それはうまくいかないようです。正しい方向への動きはすばらしいでしょう。

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