Question

我有一个包含4个div的屏幕，这些div可以在显示器屏幕上调整大小，直到某个点，正如您在link

中看到的那样

我所要做的就是找到一种方法将div Main D 放在 Main B 和 Main C 旁边，I试图将 float：left; 与宽度100％ 包含这两个div ，但它不起作用。

如果我删除了100％的宽度， Main D 会向左移动，但会更改div的原始大小（ Main B，Main C ），并且这成为一个大问题，我该如何解决这个问题？

Answer 1

将div中的菜单B和菜单C换行并浮动它：

<强> HTML

<div id="topo" style="">
    <br>
    <br>Main A</div>
<div id="sidebar">
    <div id="Menu_B" style="">
        <br>
        <br>Menu B</div>
    <div id="Menu_C" style=" ">
        <br>
        <br>Menu C</div>
</div>
<div id="main-content">
    <div id="Feed" style="">
        <br>
        <br>Main D</div>
</div>

<强> CSS

#topo {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    height:10%;
    width:100%;
    border-radius:5px;
    position: relative;
    min-width:839px;
    min-height:86px;
    max-width:1920px;
    max-height:1080px;
}
#sidebar {
    width:40%;
    max-width:764px;
    min-width:337px;
    float:left;
}
#main-content {
    width:60%;
    min-width:500px;
    float:left;
}
#Menu_B {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    max-height:428px;
    min-height:290px;
    height:40%;
    border-radius:5px;
    position: relative;
    margin-top:5px;
}
#Menu_C {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    max-height:513px;
    min-height:320px;
    height:48%;
    border-radius:5px;
    position: relative;
    margin-top:5px;
}
#Feed {
    background:#EEEEEE;
    text-align:center;
    border:1px solid #BBBBBB;
    border-radius:5px;
    position: relative;
    margin-top:5px;
    margin-left:5px;
    height:500px;
}

（我提取了内联CSS以便于阅读）。

Answer 2

我知道你正在尝试做什么，但如果不超越CSS的限制你就无法做到。我以前做过它，它涉及的麻烦比它值得更多。使用float定位div彼此相邻：left is dead simple，yes，但是你不能在浮动的左div旁边放置2个float left div，宽度为100％。

有几种方法，其中大多数涉及榨出一种好的方法。老式的计算器，做一些数字运算。只需找到div和B的最大宽度（以及它们的填充和边距），然后在CSS中，取出该数字并将宽度从100％更改为：

width: calc(100% - x);

假设x是你得到的那个数字。这可能有效，也可能无效，具体取决于您对CSS中边距和填充的工作原理的理解。如果他们没有填充或边距（或者甚至是边界），那么获得x很容易。如果你能找到它，只需插入和突出数字。

你的下一个最好的选择是jquery，因为jquery是一个结束所有，是CSS无法解决的大多数问题的全部解决方案。您需要做的就是使用这样的脚本：

function widthSetter(divB, divC) {
    var getWindow = $(window).width();
    var getB = $(divB).width();
    var getC = $(divC).width();
    var widthBC = getB + getC;
    var getD = getWindow - widthBC;

    $(divD).css("width", getD)
}
$(document).ready(function(){
    widthSetter(divB, divC);
    $(window).resize(function(){widthSetter(divB, divC)});
});

当然，你了解基本的jquery，只要确保插入他们需要的div名称，你就会好起来。

Answer 3

http://jsfiddle.net/fHZRD/

这样做，你必须将D移到另外两个上面，从B和C上的容器中移除宽度：100％，然后向右浮动D.

除非您使用

在所有三个容器周围添加容器，否则它们不会缩小

style="width:100%;display:block;min-width:860px;height:100%;"

因此，一旦veiwport达到最小宽度，它们就会保持宽阔而不是相互挤压。 D上的最大宽度会产生一个空格，但我不确定是不是这样。

这是更新

http://jsfiddle.net/R5DWF/

Answer 4

试试这个：

HTML：

 <div id="topo">
        <br>
        <br>Main A
    </div>
    <div id="menu-holder">
        <div id="Menu_B">
            <br>
            <br>Menu B</div>
        <div id="Menu_C">
            <br>
            <br>Menu C
        </div>
    </div>
    <div id="Feed">
        <br>
        <br>Main D
    </div>

<强> CSS：

#topo {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    height: 10%;
    max-height: 1080px;
    max-width: 1920px;
    min-height: 86px;
    min-width: 839px;
    position: relative;
    text-align: center;
    width: 100%;
}

#menu-holder {
    float: left;
    max-width: 768px; /* 40% of 1920 max-width of topo*/
    min-width: 335px;  /* 40% of 839 min-width of topo*/
    width: 40%;
}

#Menu_B {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    height: 40%;
    margin-top: 5px;
    max-height: 428px;
    max-width: 764px; 
    min-height: 290px;
    min-width: 337px;
    position: relative;
    text-align: center;
    width: 100%;
}

#Menu_C {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    height: 48%;
    margin-top: 5px;
    max-height: 513px;
    max-width: 764px;
    min-height: 320px;
    min-width: 337px;
    position: relative;
    text-align: center;
    width: 100%;
}

#Feed {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    float: left;
    height: 87.2%;
    margin-left: 5px;
    margin-top: 5px;
    max-height: 944px;
    max-width: 1142px;
    min-height: 678px;
    min-width: 502px;
    position: relative;
    text-align: center;
    width: 58.5%;
}

Answer 5

将此添加到主D的css中<：p>

position:absolute;
left:41%;

Div打破旁边div的大小

5 个答案: