居中容器的左边是文本，右边是方形图像？

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>