css - 防止div折断击落

Question

当在下面的示例中调整窗口大小时，是否可以防止 .small 折断并击落，并使其和 .big 保留在原处他们是？

我计划使用媒体查询来更改较小屏幕的布局，但现在 .small 在达到媒体查询分辨率之前就中断了，从而使用户体验不太愉快。

http://jsfiddle.net/7q9jbuns/

.main {
    display: table;
    border: 1px solid black;
}
.big {
    float: left;
}
.small {
    float: right;
}

<div class="wrapper">
    <div class="main">
        <p>Using display table so the box will wrap to this text</p>
        <p>Ref. <a href="http://stackoverflow.com/questions/27190514/making-divs-inside-flex-boxes-shrink-wrap">StackOverflow #27190514</a></p>
        <div class="big">
            <img src="http://placehold.it/200/200" />
        </div>
        <div class="small">
            <img src="http://placehold.it/50/50" />
        </div>
    </div>
</div>

Answer 1

一种解决方案是向 .main 添加一个 min-width，其宽度需要防止其换行。

http://jsfiddle.net/xqg3r8f3/