我如何改变3格的位置并排？

这里是我的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; 
}

谢谢！

来源

2014-02-09 user3140252

之前主要的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>

来源

2014-02-09 07:09:47 Danield

有趣。为什么你处理它们的顺序很重要，如果宽度都适当的大小？ – leigero

+1比我的更好的解决方案。 – TwilightSun

工作很好，谢谢。 :) – user3140252

只需添加float: left;到.div_main

来源

2014-02-09 07:08:28 TwilightSun

谢谢你的课，我怎么可以让.div_main宽度为100％？ – user3140252

您可以使用CSS “钙”，以控制重新排列与右浮动DIV您的标记你的主div的宽度比添加float：留在它上面。

.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/

来源

2014-02-09 07:13:28

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

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

Div是默认情况下的块级元素，如果您希望事物是内联的，则需要更改显示属性。

也许下面的CSS会适合你。

Fiddle

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

来源

2014-02-09 07:14:37 Alex

工作演示 - >CLICK HERE

添加一个类.divpull并添加float:left到:)

来源

2014-02-09 07:15:35

我如何改变3格的位置并排？

回答

相关问题