CSS \\ HTML響應式Flexbox

Question

我一直在開發自己的網頁，在主頁上，我想要一幅漂亮的橫幅，上面有3個磁貼（一個大的左側，兩個較小的左側，彼此堆疊）。 我可以使所有這些工作正常，但現在我注意到在移動設備上這確實不成比例，當屏幕寬度小於300px時，我想使這3個圖塊彼此重疊。 但是，通過查看關於stackoverflow的其他問題，我似乎無法使它正常工作，只有磁貼開始消失了

我希望完成的示例視圖

 @media only screen and (min-width: 300px) { .hero { height: 400px; width: 80%; margin-left: auto; margin-right: auto; display: flex; position: relative; } .left { float: left; width: 80% } .right { float: left; width: 80% } } @media only screen and (min-width: 600px) { .hero { height: 400px; width: 90%; margin-left: auto; margin-right: auto; display: flex; position: relative; } } .left { background-image: url('http://via.placeholder.com/1600x1200'); background-size: cover; flex: 1; } .left:hover { opacity: 0.8; } .left:hover .btnLeft { color: white; background-color: orange; border: 1px solid orange; } .right { display: flex; margin-left: 5px; flex-direction: column; flex: 0 0 40%; } .one { height: 175px; background-image: url('http://via.placeholder.com/380x260'); background-size: cover; flex: 80%; } .one:hover { opacity: 0.8; } .one:hover .btnTop { color: white; background-color: orange; border: 1px solid orange; } .two { height: 175px; margin-top: 5px; background-image: url('http://via.placeholder.com/380x260'); background-size: cover; flex: 50%; } .two:hover { opacity: 0.8; } .two:hover .btnBot { color: white; background-color: orange; border: 1px solid orange; } .btnLeft { margin-top: 300px; background-color: white; color: black; border: 1px solid black; border-radius: 2px; padding: 3px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; font-family: 'Titillium Web', sans-serif; font-weight: normal; text-transform: capitalize; } .btnTop { margin-top: 140px; background-color: white; color: black; border: 1px solid black; border-radius: 2px; padding: 2px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 25px; font-family: 'Titillium Web', sans-serif; font-weight: normal; text-transform: capitalize; } .btnBot { margin-top: 140px; background-color: white; color: black; border: 1px solid black; border-radius: 2px; padding: 2px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 25px; font-family: 'Titillium Web', sans-serif; font-weight: normal; text-transform: capitalize; } 

 <div class="hero"> <a href="http://example.com" class="left" > <div class="btnLeft">Option 1</div> </a> <div class="right"> <a href="http://example.com" class="one" > <div class="btnTop">Option 2</div> </a> <a href="http://example.com" class="two" > <div class="btnBot">Option 3</div> </a> </div> </div> 

Answer 1

這是使用flexbox實現的簡單效果。 在最小尺寸的屏幕上，為.hero容器提供flex-direction:column屬性，以使其垂直堆疊。 達到更大的斷點后，將其更改為flex-direction:row 。

另外，值得注意的是，您不需要在.left和.right容器中添加float屬性，因為這不是flexbox的功能。

要深入了解flexbox的工作原理，請查看此鏈接 。

 @media only screen and (min-width: 300px) { .hero { height: 400px; width: 80%; margin-left: auto; margin-right: auto; display: flex; position: relative; flex-direction:column; } } @media only screen and (min-width: 600px) { .hero { height: 400px; width: 90%; margin-left: auto; margin-right: auto; display: flex; position: relative; flex-direction:row; } } .left { background-image: url('http://via.placeholder.com/1600x1200'); background-size: cover; flex: 1; } .left:hover { opacity: 0.8; } .left:hover .btnLeft { color: white; background-color: orange; border: 1px solid orange; } .right { display: flex; margin-left: 5px; flex-direction: column; flex: 0 0 40%; } .one { height: 175px; background-image: url('http://via.placeholder.com/380x260'); background-size: cover; flex: 80%; } .one:hover { opacity: 0.8; } .one:hover .btnTop { color: white; background-color: orange; border: 1px solid orange; } .two { height: 175px; margin-top: 5px; background-image: url('http://via.placeholder.com/380x260'); background-size: cover; flex: 50%; } .two:hover { opacity: 0.8; } .two:hover .btnBot { color: white; background-color: orange; border: 1px solid orange; } .btnLeft { margin-top: 300px; background-color: white; color: black; border: 1px solid black; border-radius: 2px; padding: 3px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; font-family: 'Titillium Web', sans-serif; font-weight: normal; text-transform: capitalize; } .btnTop { margin-top: 140px; background-color: white; color: black; border: 1px solid black; border-radius: 2px; padding: 2px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 25px; font-family: 'Titillium Web', sans-serif; font-weight: normal; text-transform: capitalize; } .btnBot { margin-top: 140px; background-color: white; color: black; border: 1px solid black; border-radius: 2px; padding: 2px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 25px; font-family: 'Titillium Web', sans-serif; font-weight: normal; text-transform: capitalize; } 

 <div class="hero"> <a href="http://example.com" class="left" > <div class="btnLeft">Option 1</div> </a> <div class="right"> <a href="http://example.com" class="one" > <div class="btnTop">Option 2</div> </a> <a href="http://example.com" class="two" > <div class="btnBot">Option 3</div> </a> </div> </div>