css - 即使调整窗口大小，如何定位两个元素内联？

Question

我想要这两个元素：

http://gyazo.com/44b1b0417d74b05287fe774a4d482bf0

无论窗口是否水平调整大小，都始终排在一行。因为现在它们分成两行，就像在这个屏幕上一样：

http://gyazo.com/1820dc436dba2e827b330039109dc0ee

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

请你能给我一个提示如何做到这一点？谢谢！

Answer 1

如果您设置在父级上，则 2 个内联元素可以保持在侧边，无论它们有什么房间

white-space:nowrap;

不要忘记white-space为normal孩子们重置:)

Answer 2

诀窍是在标签上使用max-width:100%;和height:autoimg

JSFiddle 演示

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;
}