0

我有一些 div 的问题。简而言之，这就是我需要的：2 个具有一定宽度（相同宽度）的 div - 一个向左浮动，一个向右浮动，第三个 div 占据所有剩余空间。div 使用 display : inline-block 将它们放在同一行。

我试过这个：

    <div class="wrapper">
        <div class="control leftControl"></div>
        <div class="display"></div>         
        <div class="control rightControl"></div>
    </div>

这是我的CSS：

.wrapper {
    width: 100%;
    height: 100%;
    min-width: 960px;
    background-color: #E8E8E8;
}

.control {
    width: 10%;
    height: 100%;
    display: inline-block;
    background-color: #ADADAD;
}

.leftControl {
    float: left;
}

.rightControl {
    float: right;
}

.display {
    width: 80%;
    height: 100%;
    display: inline-block;
}

问题是在某些分辨率上使用 % 会导致最后一个 div (controlRight) 移动到新的一行。我可以理解为什么并发现如果我在显示上使用 79% 的 div 显示几乎正确（1% 未使用。）我很清楚，这不是一个正确的解决方案。任何帮助表示赞赏。

4

1 回答 1

1

您可以放置​​所有元素float:left，并且您的 100% 将始终适合：小提琴

HTML

<div class="control"></div>
<div class="display"></div>         
<div class="control"></div>

CSS

.control {
    width: 10%;
    height: 200px;
    background-color: green;
    float:left;
}

.display {
    width: 80%;
    height: 200px;
    background-color:blue;
    float:left; 
}​

把所有东西都放在上面float left只会把div一个一个地推到右边。

于 2012-11-30T13:57:54.053 回答