垂直边界的css最小边距

需要更改的代码如下： 1）左列（红色）至少宽200px，最宽20％ 2）“main”列（黑色）宽度至少为400px，最宽为80％ 3）列总是保持水平相邻，“主”列永远不会换行到新行？垂直边界的css最小边距

注：这似乎是其他“分利润”型CSS的问题在这里重复，但我已经经历了几无济于事，比如这个：Using a percentage margin in CSS but want a minimum margin in pixels?

<html> 
<head> 
    <title>Margin Test</title> 
    <style> 
     #container { 
      display: table; 
      width: 100%; 
      background-color: green; 
     } 
     #left-column { 
      display: table-cell; 
      min-width: 200px; 
      width: 20%; 
      background-color: red; 
      float: left; 
     } 
     #main-column { 
      display: table-cell; 
      width: 80%; 
      background-color: black; 
      float: left; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="left-column"> 
      left 
     </div> 
     <div id="main-column"> 
      main 
     </div> 
    </div> 
</body>

来源

2014-01-05 Trindaz

你的逻辑是有缺陷的。如果容器的100％宽度小于600px宽度（即两个宽度的总和）呢？这两个元素不能是最大宽度的80％，没有包装... – BenM

@BenM然后一个水平滚动条将出现在浏览器窗口的底部 – Trindaz

@BuddhistBeast不，因为如果你调整输出窗口的大小，他们换行。 – BenM

http://jsfiddle.net/p2mdj/

这是你想要的吗？我删除了...

float: left;

，因为表细胞自动找出答案，并增加了

min-width: 400px

到主股利。

它现在基本上是一个标准表，每个单元指定最小宽度。表格几乎不会包装他们的单元格，除非你做一些奇怪的东西（比如把浮标放在它们上面：P）

来源

2014-01-05 22:01:46

在7分钟内可以接受。这解决了这个问题。那个jsfiddle链接是否意味着链接到一个特定的小提琴？或者你说在未来提问时我应该使用它？ – Trindaz

呃我更新了那个链接，它现在是一个特定的小提琴 –

垂直边界的css最小边距

回答

相关问题