居中的容器在左侧带有文本，在右侧带有正方形图像？

Question

我在这里似乎很简单的事情上迷失了方向，但是在玩了几个小时之后，我认为是时候寻求帮助了。

我需要的是一个容器（请参见粉红色），该容器位于页面的中心，是页面宽度的70％。 然后，容器内应有两个Divs。

左边的一个用于文本，右边的一个用于应保持固定大小的正方形图像（假设200x200px-我的意思是，缩放后最终在一块文本旁边有一个50x50px的头像看起来很奇怪您的浏览器关闭）。 如果右Div切换到移动设备上的第一个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> 

任何帮助将不胜感激！

形象与我的意思

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>