Question

我所拥有的是3个div，1个用于左侧1个用于中心，1个用于右侧我需要的是3列 - 左边总是在那里，中心也是如此，但如果右边有，那么它的宽度应该是自适应的

<html>
<head>
</head>
<body>
    <div style="width:460px; padding:0px 20px;">
        <div style="float:left; background: red; width:100px;">
            red
        </div>
        <div style="float:left; background: yellow;  max-width:400px">
            yellow
        </div>
        <div style="float:left; background: green; width:100px;">
            green
        </div>
    </div>
</body>
</html>

我做错了什么？

Answer 1

为了避免JavaScript解决方案并仅使用CSS和HTML，我能想到的最好的方法是使用列的类名，并重新排序HTML，以便最右边的列在HTML中是第一个：

<div class="wrap" style="width:500px">
    <div class="col right">Right Column</div>
    <div class="col left">Left column</div>
    <div class="col middle">Middle column</div>
</div>
<div class="wrap" style="width:500px">
    <div class="col left">Left column 2</div>
    <div class="col middle">Middle column 2</div>
</div>

使用CSS adjacent-sibling选择器firstSibling + secondSibling，这可以用来修改中间列的宽度：

.wrap {
    width: 500px;
    margin: 1em auto;
    overflow: hidden;
}

.left,
.right {
    width: 100px;
    background-color: #ffa;
}

.middle {
    width: 400px;
    background-color: #f90;
}

.left,
.middle {
    float: left;
}

.right {
    float: right;
}

div.right + div.left + div.middle {
    width: 300px;
}

JS Fiddle demo

如果您将.middle列向右浮动，而不是像上一个示例中那样 left ，那么您可以简化相邻兄弟选择器，以及实际上，HTML在视觉上是相反的（这比上面的例子更容易理解/使用，其中两列以相反的顺序排在第一位，然后中间的列在结尾处），给出：

<div class="wrap" style="width:500px">
    <div class="col right">Right Column</div>
    <div class="col middle">Middle column</div>
    <div class="col left">Left column</div>
</div>
<div class="wrap" style="width:500px">
    <div class="col left">Left column 2</div>
    <div class="col middle">Middle column 2</div>
</div>

CSS：

.wrap {
    width: 500px;
    margin: 1em auto;
    overflow: hidden;
}

.left,
.right {
    width: 100px;
    background-color: #ffa;
}

.middle {
    width: 400px;
    background-color: #f90;
}

.left {
    float: left;
}

.right,
.middle {
    float: right;
}

div.right + div.middle {
    width: 300px;
}

JS Fiddle demo

参考文献：

Adjacent sibling selector, at the W3.org。

Answer 2

宽度包括边框，您必须考虑到这一点。如果稍微减小中心元素的宽度，则右边不会换行。

但是，我的代码中没有任何内容可以处理中心宽度为“自适应”的内容。

Answer 3

不确定您要做什么，但这可能会奏效。如果你可以提供一些关于它应该做什么的更多细节，它会有所帮助，但这似乎做你想要的。如果右列设置为display：none，则中心仍然会完全结束。

<html>
<head>
</head>
<body>
<div style="width:480px; padding:0px 20px;">
    <div style="float:left; background: red; width:100px;">
        red
    </div>
    <div style="float:right; background: green; width:100px;>
        green
    </div>
    <div style="background: yellow; width:100%;">
        yellow
    </div>
</div>
</body>
</html>

max-width和float div

3 个答案: