Question

div（#contentwrapper）是否有可能在下一个示例中并排浮动时占用所有剩余宽度：

＆＃13;

import heapq

def smallestk(heap, k):
    if not k:
        return
    candidates = [(heap[0], 0)]
    for _ in xrange(k):
        val, index = heapq.heappop(candidates)
        yield val
        for child in (2*index+1, 2*index+2):
            if child < len(heap):
                heapq.heappush(candidates, (heap[child], child))

＆＃13;

#maincontainer {
    width:1000px;
    height: 100%;
    display:inline-block;
}
#leftcolumn {
    float:left;
    width: 100px;
    height:20px;
    background: blue;
}
#contentwrapper {
    float:right;
    width:900px;
    height: 20px;
    background-color: red;
}

＆＃13;

JsFiddle

Answer 1

这很简单。使用好的'CSS：

float-left仅左元素
将margin-left添加到右栏以补偿左边的一个宽度：

#leftcolumn {
    float:left;
    width: 100px;
    background: blue;
}
#contentwrapper {
    margin-left: 100px; /* same as #leftcolumn width */
    background: red;
}

<div id="maincontainer">
    <div id="leftcolumn">left</div>
    <div id="contentwrapper">right<br>contentwrapper</div>
</div>

Answer 2

尝试使用flexbox。它比使用表更好。确保在其中包含供应商前缀。

https://jsfiddle.net/qa6cds9c/

<div id="maincontainer">
    <div id="leftcolumn"></div>
    <div id="contentwrapper"></div>
</div>

#maincontainer {
    border: 1px solid red;
    display: flex;
}

#leftcolumn {
    border: 1px solid blue;
    height: 400px;
    width: 100px;
}

#contentwrapper {
    border: 1px solid green;   
    height: 400px;
    flex: 1;
}

Answer 3

您可以使用表而不是div。或者使用CSS将div表现为一个表。

如果一行中有两个表格单元格并将宽度设置为1，则另一个将填充剩余空间。

不确定这是否被视为最佳做法。

浮动div并排 - 两列布局

3 个答案: