html – 如何在收缩父代时显示内嵌块而不会在新行上显示它们

概述容器中有2列(内嵌块)(100％宽). >左侧列必须具有最小宽度,例如200px,宽度：25％. 右侧栏宽：75％ <style>.outer { width: 100%; border: 1px solid black;}.left, .right { display:inline-block;}.left { min-width: 200px; 容器中有2列(内嵌块)(100％宽).

>左侧列必须具有最小宽度,例如200px,宽度：25％.
右侧栏宽：75％

<style>.outer {    wIDth: 100%;    border: 1px solID black;}.left,.right {    display:inline-block;}.left {    min-wIDth: 200px;    wIDth: 25%;    background-color: #dcc2c2;}.right {    wIDth: 75%;    background-color: #d0dee8;}</style>    <div >        <div >left</div>        <div >right</div>    </div>

在调整大小之前,直到达到最小宽度为止,这些列并排就是我想要的,但是一旦最小宽度打开,右列就在下一行.

如何使正确的列缩小,但不能落在下一行？

Link to JSFiddle

解决方法 添加空格：nowrap和overflow：hIDden到outer：

.outer {    wIDth: 100%;    border: 1px solID black;    white-space:nowrap;    overflow:hidden;}

jsFiddle example

总结

以上是内存溢出为你收集整理的html – 如何在收缩父代时显示内嵌块而不会在新行上显示它们全部内容，希望文章能够帮你解决html – 如何在收缩父代时显示内嵌块而不会在新行上显示它们所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。