防止div中断并击落

在下例中调整窗口大小时，是否可以防止.small中断并击落，并且让它和.big保持在原来的位置？防止div中断并击落

我计划使用媒体查询来更改较小屏幕的布局，但现在.small在媒体查询解析达到之前就会中断，从而使用户体验不太舒服。

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

来源

2015-06-20 Mark Boulder

如果你不希望小格降下来，有什么事情发生？调整大div，或触发滚动条？ – Stickers

是否可以调整大分区？ –

最好它应该保持在同一个地方，直到媒体查询接管并禁用移动大小的浮动。 –

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

JsFiddle Demo

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

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

使用CSS Flexbox的。再次，需要添加容器。

JsFiddle Demo

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

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

来源

2015-06-20 22:59:51 Stickers

这是你在找什么？

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

来源

2015-06-20 21:48:43 SebHallin

不幸的是，容器本身必须包装以获得最大的流动性。有关更多信息，请参阅参考SO问题。 –

一种解决方案是一个min-width添加到您的.main，与所需的宽度，以保持它从包装。

http://jsfiddle.net/xqg3r8f3/

来源

2015-06-20 21:51:25 tavnab

不错的解决方案，但不幸的是'.main'的宽度因文章而异。 –

谢谢马克。您可以使用JavaScript（或者您的应用程序的框架提供的动态分配样式）根据需要设置“最小宽度”，但在您的情况下这可能不可行。可能有一个flexbox解决方案只使用CSS来满足您的需求，但我对它并不熟悉。 – tavnab

防止div中断并击落

回答

相关问题