Question

我有一些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％） unsued。）我很清楚，这不是一个正确的解决方案。任何帮助表示赞赏。

Answer 1

你可以放置所有元素float:left，你的100％将始终适合：fiddle

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。

Div定位在同一条线上

1 个答案: