html - 无法弄清楚如何在 div 中并排放置图像和文本并保持响应，包括 fiddle

Question

我很难编码这种效果。到目前为止，我所拥有的它可以在某些浏览器宽度下工作，但如果你拉伸(stretch)浏览器，你会看到东西不对劲。

http://jsfiddle.net/Hq8C4/

我设置

           float:right;
           float:left;

还有我试过的其他一些东西，您可以在 fiddle 中看到。

这是我需要发生的事情..1. 我需要包含的 div 保持 100% 的宽度2. 我需要一个图像容器(贴在 div 的底部)和一个段落容器，每个容器都占据屏幕的 50%，并且在侧面有一些空间(填充)以免触及浏览器边框。3. 我需要它来响应。我可以设置一个元标记，使段落跳到手机顶部并在浏览器达到较小宽度时居中，但当宽度较大时，它们需要像提供的照片一样拆分。***4。没有滚动。

如果你们需要我澄清任何事情，请发表评论，我几乎会立即回复!

非常感谢您的帮助!

附言。请包括一个 fiddle 。

Answer 1

1) 显示: block ；默认情况下已经是 100%

2)vertical-align 应该在图像上做

3) 一旦全宽小于 min-widthX2 + 1 white-space，min-width 将把东西放在彼此之上 http://jsfiddle.net/Hq8C4/2/

html, body, * {
    padding:0;
    margin:0;
}
#contain {
    background-color:#3b3b40;
    height:100%;/* no need  */
    margin:0;
    padding:0;
    text-align:center;
}
#img {
    padding:0;
    margin:0;
    width:49%;
    min-width:350px;   
    vertical-align:bottom;
}
p {
    width:49%;
    min-width:350px;
    display:inline-block;
    padding:40px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    color:white;
}

<div id="contain">
    <img src="http://tumster.com/image/iphone.png" id="img" />
    <p>Lorem ipsum dolor ...... t tincidunt turpis vehicula vitae.</p>
</div>