我创建了一个网站，在主div上显示多个div（如内联元素），这些div包含IMG和P元素。
好吧，如果我留下P元素（或没有p标签的文本），一切正常，但如果我在img之后添加文本，则相应的div将退出正常位置。
该页面在http://ace-acid.no-ip.org/acid-game-studios/处于联机状态 （即工作版）
这个是带有问题的版本 - ＆gt; http://ace-acid.no-ip.org/acid-game-studios-issue/ （在这里你可以清楚地看到所有没有文字的div，都是间隔的......）
如何防止此行为？
谢谢大家^^
＆LT;编辑＆gt;
我认为这是一个CSS问题（块元素，内联块元素，fextflow，垂直对齐......）不是吗？
b.t.w。 - ＆GT;该网站是一个流畅的网格，所以如果你缩小浏览器，它将显示一个tabled和一个移动版本。问题似乎只在文本所在的同一行中出现，因为在下一行中，div块没有间隔...
＆LT; /编辑＆gt;
HTML code：
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>aCID Game Studios</title>
<link rel="stylesheet" type="text/css" href="boilerplate.css">
<link rel="stylesheet" type="text/css"href="style.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div_header" align="center">
<div id="div_header_img"></div>
<div id="div_menu" align="center">
<p>< MENU ></p>
</div>
</div>
<div id="div_main" align="center">
<div id="div_page">
<br><br><p>< PAGE ></p><br><br>
<div class="div_game_thumb">
<img style="vertical-align:middle" src="img/games/LegendOfAce.png" onMouseOver="this.src='img/games/LegendOfAce_hover.png'" onMouseOut="this.src='img/games/LegendOfAce.png'"/>
</div>
<div class="div_game_thumb">
<img src="img/games/GunsOfTheNation.png" onMouseOver="this.src='img/games/GunsOfTheNation_hover.png'" onMouseOut="this.src='img/games/GunsOfTheNation.png'"/>
</div>
<div class="div_game_thumb">
<img src="img/games/LegendOfAce.png" onMouseOver="this.src='img/games/LegendOfAce_hover.png'" onMouseOut="this.src='img/games/LegendOfAce.png'"/>
</div>
<div class="div_game_thumb">
<img src="img/games/GunsOfTheNation.png" onMouseOver="this.src='img/games/GunsOfTheNation_hover.png'" onMouseOut="this.src='img/games/GunsOfTheNation.png'"/>
</div>
<div class="div_game_thumb">
<img src="img/games/LegendOfAce.png" onMouseOver="this.src='img/games/LegendOfAce_hover.png'" onMouseOut="this.src='img/games/LegendOfAce.png'"/>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码：
@charset "utf-8";
/* Einfache fließende Medien
Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
http://www.alistapart.com/articles/fluid-images/
*/
html{
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #0c0d0f;
color: #3982aa;
}
p {
margin: 0;
padding: 10px;
}
img, object, embed, video {
width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
width: 100%;
}
.div_game_thumb {
width:320px;
height:350px;
display:inline-block;
border:1px solid #fff;
}
/*
Dreamweaver-Eigenschaften für fließende Raster
----------------------------------
dw-num-cols-mobile: 6;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 14;
dw-gutter-percentage: 15;
Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
und "Golden Grid System" von Joni Korpi
http://goldengridsystem.com/
*/
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 0;
padding-right: 0;
}
#div_header {
clear: both;
float: left;
margin: 0;
width: 100%;
display: block;
}
#div_header_img {
width: 450px;
height: 150px;
background-color: #999;
background-position: top center;
background-repeat: no-repeat;
background-image: url(img/header_m.png);
}
#div_menu {
width: 450px;
height: 50px;
background-color: #111;
}
#div_main {
clear: both;
float: left;
margin: 0;
width: 100%;
display: block;
min-height: 300px;
}
#div_page {
width: 450px;
min-height: 300px;
background-position: top center;
background-repeat: repeat-x;
background-image: url(img/page_border_top.png);
background-color: #000;
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 481px) {
body {
background-position: top center;
background-repeat: repeat;
background-image: url(img/bg.png);
}
#div_header {
clear: both;
float: left;
width: 100%;
display: block;
display: block;
background-position: top center;
background-repeat: repeat-y;
background-image: url(img/page_bg_t.png);
}
#div_header_img {
width: 650px;
height: 150px;
display: block;
background-image: url(img/header_t.png);
}
#div_menu {
width: 650px;
background-position: top center;
background-repeat: no-repeat;
background-image: url(img/menu_bg_t.png);
}
#div_main {
clear: both;
float: left;
margin: 0;
width: 100%;
display: block;
background-position: top center;
background-repeat: repeat-y;
background-image: url(img/page_bg_t.png);
}
#div_page {
width: 650px;
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
#div_header {
clear: both;
float: left;
width: 100%;
display: block;
background-image: url(img/page_bg.png);
}
#div_header_img {
width: 1000px;
height: 200px;
background-image: url(img/header.png);
}
#div_menu {
width: 1000px;
background-position: top center;
background-repeat: no-repeat;
background-image: url(img/menu_bg.png);
}
#div_main {
clear: both;
float: left;
margin: 0;
width: 100%;
display: block;
background-image: url(img/page_bg.png);
}
#div_page {
width: 1000px;
}
}
答案 0 :(得分：1)
在vertical-align: top;
.div_game_thumb
内联元素服从垂直对齐。
另外，如果你想要跨浏览器的内联块（IE7 +），你需要像这样定义它：
display: inline-block;
*zoom: 1;
*display: inline;
*注意：订单很重要。
答案 1 :(得分：0)
vertical-align: top可以节省一天的时间！把它放在.div_game_thumb上。
通过添加margin: 2px 0;，您可以恢复在执行此操作后消失的一点边距。