Question

我怎样才能改变3 div的位置并排？

这是我的HTML代码：

    <body>
    <div class="div_header" id="div_header"></div>
    <div class="div_left" id="div_left"></div>
    <div class="div_main" id="div_main"></div>
    <div class="div_right" id="div_right"></div>
    </body>

这是我的3 Div的CSS代码：

.div_header {
    height: 40px;
    width: 100%;
}

.div_left {
    float: left;
    min-height: 300px;
    width: 250px;
}

.div_main {
    min-height: 300px;
    margin-left: 250px;
    margin-right: 250px;
}

.div_right {
    float: right;
    min-height: 300px;
    width: 250px;
}

谢谢！

Answer 1

在主div

之前使用右浮动div重新排列标记

<强> FIDDLE

<div class="div_header" id="div_header"></div>
<div class="div_left" id="div_left"></div>
<div class="div_right" id="div_right"></div>
<div class="div_main" id="div_main"></div>

Answer 2

您可以使用css“calc”来控制主div的宽度，而不是添加float：left。

.div_main {
    float: left;
    min-height: 300px;
    width: calc(100% - 500px);  <-- 250px+250px(div-left's width + div-right's width)
    background-color: blue;
}

这是一个例子：

http://jsfiddle.net/creed88/ucKw7/

Answer 3

只需将float: left;添加到.div_main

即可

Answer 4

您可以将float: left;添加到.div_main或重新排列div。

如果您不必使用基于浮动的布局，则可以将div更改为内联块。

默认情况下，Div是块级元素，如果你想要内联，你需要更改显示属性。

也许下面的CSS适合你。

Fiddle

.div_left,
.div_main,
.div_right {
    display: inline-block;
    min-height: 300px;
    width: 250px;
}

Answer 5

工作演示 - ＆gt; CLICK HERE

添加课程.divpull并将float:left添加到课程中：）

如何改变3 div的位置并排？

5 个答案: