防止div中断和击落

Question

在下面的示例中调整窗口大小时，是否可以阻止.small中断和击落，同时将.big和.small保持在原位？

我计划使用媒体查询来更改较小屏幕的布局，但现在.main { display: table; border: 1px solid black; } .big { float: left; } .small { float: right; }在达到媒体查询解析之前就会中断，从而使用户体验不那么愉快。

http://jsfiddle.net/7q9jbuns/

＆＃13;

＆＃13;

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

＆＃13;

TlsException: Invalid certificate received from server. Error code:    0xffffffff80092012
Mono.Security.Protocol.Tls.Handshake.Client.TlsServerCertificate.validateCertificates (Mono.Security.X509.X509CertificateCollection certificates)
Mono.Security.Protocol.Tls.Handshake.Client.TlsServerCertificate.ProcessAsTls1 ()
Mono.Security.Protocol.Tls.Handshake.HandshakeMessage.Process ()
(wrapper remoting-invoke-with-check) Mono.Security.Protocol.Tls.Handshake.HandshakeMessage:Process ()
Mono.Security.Protocol.Tls.ClientRecordProtocol.ProcessHandshakeMessage (Mono.Security.Protocol.Tls.TlsStream handMsg)
Mono.Security.Protocol.Tls.RecordProtocol.InternalReceiveRecordCallback (IAsyncResult asyncResult)
Rethrow as IOException: The authentication or decryption has failed.
Mono.Security.Protocol.Tls.SslStreamBase.AsyncHandshakeCallback (IAsyncResult asyncResult)
Rethrow as WebException: Error getting response stream (Write: The authentication or decryption has failed.): SendFailure
System.Net.HttpWebRequest.EndGetRequestStream (IAsyncResult asyncResult)
System.Net.HttpWebRequest.GetRequestStream ()
System.Net.WebClient.UploadValuesCore (System.Uri uri, System.String method, System.Collections.Specialized.NameValueCollection data, System.Object userToken)
System.Net.WebClient.UploadValues (System.Uri address, System.String method, System.Collections.Specialized.NameValueCollection data)

＆＃13;

＆＃13;

＆＃13;

Answer 1

一种解决方案是向min-width添加.main，其宽度为防止其不被包裹。

http://jsfiddle.net/xqg3r8f3/

Answer 2

使用CSS表格布局。将两个div包装成一个容器。

<强> JsFiddle Demo

＆＃13;

＆＃13;

.main {
    display: inline-block;
    border: 1px solid black;
}
.images {
    display: table;
    width: 100%;
}
.big, .small {
    display: table-cell;
    vertical-align: top;
}
.small {
    text-align: right;
}

＆＃13;

<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="images">
            <div class="big">
                <img src="http://placehold.it/200/200" />
            </div>
            <div class="small">
                <img src="http://placehold.it/50/50" />
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用CSS flexbox。同样，需要添加容器。

<强> JsFiddle Demo

＆＃13;

＆＃13;

.main {
    display: inline-block;
    border: 1px solid black;
}
.images {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: columns;
    -ms-flex-direction: columns;
    flex-direction: columns;
}
.big {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

＆＃13;

<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="images">
            <div class="big">
                <img src="http://placehold.it/200/200" />
            </div>
            <div class="small">
                <img src="http://placehold.it/50/50" />
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是你正在寻找的吗？

white-space: nowrap;
/* (overflow: hidden;) */