Question

我需要以下内容：

有2个内嵌列 - 左 - 最小宽度，例如50em，最大宽度，例如75em; - 右 - 固定，例如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>

Answer 2

将min-width提交给.layout{}：

.layout{
    width:100%;
    min-width:95em;
}

两个内联块（右侧固定）

2 个答案: