Question

此代码中需要更改的内容是： 1）左列（红色）宽至少200px，宽度最多20％ 2）“主”栏（黑色）至少400px宽，最多80％宽 3）列始终保持水平相邻，“主”列永远不会换行到新行？

注意：这可能与其他“min-margin”类型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>

Answer 1

http://jsfiddle.net/p2mdj/

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

float: left;

因为表格单元格自动计算出来并添加了

min-width: 400px

到您的主要部门。

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

css垂直边距的最小边距

1 个答案: