居中容器的左邊是文本，右邊是方形圖像？

Question

我在這裏忽略了一些似乎很簡單的事情，但在玩了幾個小時之後，我認爲是時候尋求一些幫助。

我需要的是一個容器（見粉紅色），它以頁面爲中心，佔頁面寬度的70％。那麼容器內應該有兩個Div。

其中一個左邊的文字，右邊的一個方形圖像應該保持在一個固定的大小（比方說，200x200px - 我的意思是，它看起來很奇怪，最終有一個50x50px的化身旁邊的塊縮小您的瀏覽器後文本）。如果正確的Div轉移到移動設備上的第一個分區之下，這沒關係。

我一直沒能在這裏找到有用的答案，但我一直在玩下面的代碼（這是相反的 - 左邊的小圖片），但由於某種原因，我只是不能讓它工作。

.wrapper { 
 
    border: 2px solid #000; 
 
    overflow: hidden; 
 
} 
 
.wrapper div { 
 
    min-height: 200px; 
 
    padding: 10px; 
 
} 
 
#one { 
 
    background-color: gray; 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 140px; 
 
    border-right: 2px solid #000; 
 
} 
 
#two { 
 
    background-color: white; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    border: 2px dashed #ccc; 
 
    min-height: 170px; 
 
} 
 
@media screen and (max-width: 400px) { 
 
    #one { 
 
    float: none; 
 
    margin-right: 0; 
 
    width: auto; 
 
    border: 0; 
 
    border-bottom: 2px solid #000; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div>

任何幫助，將不勝感激！

Image with what I mean

Answer 1

你可以使用flexbox

.wrapper { 
 
    display: flex; 
 
    width: 70%; 
 
    max-width: 1000px; /* added this to limit its width on very wide screens */ 
 
    margin: 0 auto; 
 
    border: 2px solid #000; 
 
    overflow: hidden; 
 
} 
 
.wrapper div { 
 
    min-height: 200px; 
 
    padding: 10px; 
 
} 
 
#one { 
 
    flex: 1; 
 
    background-color: gray; 
 
    border-right: 2px solid #000; 
 
} 
 
#two { 
 
    margin: 10px; 
 
    border: 2px dashed #ccc; 
 
    width: 200px; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .wrapper { 
 
    flex-direction: column; 
 
    } 
 
    #one { 
 
    border-right: none; 
 
    } 
 
    #two { 
 
    width: auto; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div>

寬屏幕的另一種選擇將是一個額外的media query

.wrapper { 
 
    display: flex; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
    border: 2px solid #000; 
 
    overflow: hidden; 
 
} 
 
.wrapper div { 
 
    min-height: 200px; 
 
    padding: 10px; 
 
} 
 
#one { 
 
    flex: 1; 
 
    background-color: gray; 
 
    border-right: 2px solid #000; 
 
} 
 
#two { 
 
    margin: 10px; 
 
    border: 2px dashed #ccc; 
 
    width: 200px; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .wrapper { 
 
    flex-direction: column; 
 
    } 
 
    #one { 
 
    border-right: none; 
 
    } 
 
    #two { 
 
    width: auto; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1200px) { 
 
    .wrapper { 
 
    width: 50%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
</div>