即使调整窗口大小，如何将两个元素内联放置？

Question

我想要这两个要素：

http://gyazo.com/44b1b0417d74b05287fe774a4d482bf0

无论窗口是否水平调整大小，

始终在一行中。因为现在他们分成两行，就像在这个屏幕上一样：

http://gyazo.com/1820dc436dba2e827b330039109dc0ee

我尝试向左和向右浮动一个元素，但它不起作用。

请你能给我一些提示怎么做？ 谢谢！

Answer 1

如果您设置父级

，则无论他们拥有什么房间，内联的2个元素都可以保留在侧面

white-space:nowrap;

不要忘记为孩子重置white-space至normal：）

Answer 2

诀窍是在max-width:100%;代码上使用height:auto和img

<强> JSFiddle Demo

<强> HTML

<div class="wrapper">
    <div class="left">
        <img src="http://placehold.it/600x600" alt="">
    </div>
    <div class="right">
        <img src="http://placehold.it/600x600" alt="">
    </div>
    <div class="clr"></div>
</div>

<强> CSS

.wrapper {
    width:50%;
    margin:0 auto;
    border:1px solid red;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:50%;
    float:right;
}
.clr {
    clear:both;
}
img {
    max-width:100%;
    height:auto;
}