css - 两个内联 block (右侧固定)

Question

我需要做到以下几点:

有2个内联列 - 左 - 最小宽度例如 50 em，最大宽度例如 75 em； - 右 - 固定 例如20em.

如果屏幕宽度小于 95em，列将在另一列下方。

我尝试通过以下方式做到这一点:

 <style type="text/css">
   .layout {width:100%;}
   .col1 {background-color:gold; display:inline; min-width:50em; max-width:70em;}
   .col2 {background-color:red; display:inline; width:20em;}
  </style>

<div class="layout">
    <div class="col1">Column1</div>
    <div class="col2">Column2</div>
</div>

但没有成功 - col1 的最小宽度不起作用。谁能给我正确的例子？我用谷歌搜索解决方案但没有成功。

Answer 1

尝试使用 display:inline-block; 而不是 display:inline。您不能在内联元素上设置宽度。

Demo

更新:

如果您希望 .col1 的宽度限制为窗口的宽度，请执行以下操作:

<style type="text/css">
   .layout {width:100%; min-width:95em;}
   .col1 {background-color:gold; display:inline-block; width: 50em; max-width:100%;}
   .col2 {background-color:red; display:inline-block; width:20em;}
</style>

<div class="layout">
    <div class="col1">Column1</div>
    <div class="col2">Column2</div>
</div>