将div放在float下面：left divs

I'm trying to have a site that has the basic structure:

我正在尝试拥有一个具有基本结构的网站：

<1 div>  
<3 divs next to each other>  
<1 div>

The 3 divs are float:left in order to make be on the same level. However, they 5th div (at the bottom) sort of moves up to the top of the 3 divs in IE, and shown like that in Chrome, although the content is below the 3 divs.
I think I've just done some lazy coding here, but don't really know any better.
I've currently got:

3个div是浮动的：左边是为了使它们处于同一水平。然而，他们的第5个div（在底部）有点移动到IE中3个div的顶部，并在Chrome中显示，尽管内容低于3个div。我想我在这里做了一些懒惰的编码，但是真的不知道更好。我现在有：

<div id="results">
<!-- Ajax Content Here -->
</div>
<div id="leftpanel">
</div>
<div id="photo">
</div>
<div id="top3">
</div>
<div id="voting">
</div>

The results is the top one, leftpanel, photo and top3 are the middle 3, whilst voting is below the 3.
Basic CSS is :

结果是前一个，左侧面板，照片和顶部3是中间3，而投票低于3.基本CSS是：

#leftpanel {
float:left;
width:20%;
height: 600px;
}

#top3 {
float: left;
width:20%
}

#photo {
width: 60%;
float:left;
text-align: center;
}

#voting {
width: 500px;
height: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#results{
width: 300px;
height: 20px;
margin-left: auto;
margin-right:auto;
margin-bottom: 5px;
text-align: center;
}

I'm sure it's something silly I'm doing, so any input is much appreciated, I could use to learn how to do this properly :) I previously had a containing div on the 3 middle divs, but this didn't work since the ones inside change size. Maybe I need to do this, but in a different way?

我确定这是愚蠢的我正在做的事情，所以任何输入都非常感激，我可以用来学习如何正确地做到这一点:)我以前在3个中间div上有一个包含div，但这不起作用里面的变化大小。也许我需要这样做，但以不同的方式？

3 个解决方案

#1

Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically. I think this would make your code much cleaner than dealing with floats. Here's a demo:

您可以考虑简单地将中间div的display属性设置为“inline-block”，而不是使用浮点数。请记住，默认情况下，div元素具有块显示，这意味着它们占据其父元素的整个宽度，即使其宽度小于父宽度。另一方面，内嵌块像拼图一样装配在一起并水平流动而不是垂直流动。我认为这会使你的代码比处理浮点数更清晰。这是一个演示：

http://jsfiddle.net/scMFC/

3 个解决方案

#1

更多相关文章

随机推荐