Html 缩小父级时如何显示内联块而不在新行上断开它们

How to display inline blocks without breaking them on new line when shrinking parent

提问by code.tweetie

I have 2 columns (inline blocks) in a container (100% width).

我在一个容器（100% 宽度）中有 2 列（内联块）。

1. Left side column has to have a min-width, say 200px, width:25%.

2. Right side column has width: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 class="outer">
           <div class="left">left</div>
           <div class="right">right</div>
       </div>
   

1. 左侧列必须有一个最小宽度，比如 200 像素，宽度：25%。

2. 右侧栏宽度：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 class="outer">
           <div class="left">left</div>
           <div class="right">right</div>
       </div>
   

Until the min-width is reached when resizing, the columns sit side by side which is what I want, but once the min-width kicks in, the right column falls on the next line.

在调整大小时达到最小宽度之前，列并排放置，这正是我想要的，但是一旦最小宽度开始，右列就会落在下一行。

How can I make the right column to shrink but not fall on the next line ?

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

Link to JSFiddle

链接到 JSFiddle

回答by j08691

Add white-space:nowrapand overflow:hiddento outer:

添加white-space:nowrap和overflow:hidden到外部：

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

jsFiddle example

jsFiddle 示例

回答by Anima-t3d

You can use calc(100% - 200px)keep spaces for it to work!

您可以使用calc(100% - 200px)保留空间使其工作！

.right {
    width:75%;
    max-width:calc(100% - 200px);
    background-color: #d0dee8;
}

Fiddle

小提琴

Info about css3 calc()

关于 css3 calc() 的信息