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

一种解决方案是将 min-width 添加到您的 .main 中，以防止其换行所需的宽度。

http://jsfiddle.net/xqg3r8f3/