HTML & CSS - Проблем с вградени блокови елементи

Направих уебсайт, където в главния div се показват множество div (като вградени елементи), тези div съдържат IMG и P елемент.

Е, ако оставя P елемента (или текста без p таг), всичко е наред, но ако добавя текст след img, съответният div ще излезе от нормалната позиция.

Страницата е онлайн на http://ace-acid.no-ip.org/acid-game-studios/ (това е работещата версия)

И това е версията с проблема в нея -> http://ace-acid.no-ip.org/acid-game-studios-issue/ (тук можете ясно да видите, че всички div, които нямат текст в себе си, са разположени надолу...)

Как мога да предотвратя това поведение?

Благодаря на всички момчета ^^

‹ РЕДАКТИРАНЕ >

Мисля, че това е проблем с css (блоков елемент, вграден блоков елемент, fextflow, вертикално подравняване, ...), нали?

между другото -> уебсайтът е базиран на течна мрежа, така че ако намалите мащаба на браузъра, той ще покаже таблична и мобилна версия. проблемът изглежда се появява само в същия ред, където е текстът, защото в следващия ред div-блоковете не са разположени надолу...

‹ /РЕДАКТИРАНЕ >

HTML код:

<!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="/bgboilerplate.css">
<link rel="stylesheet" type="text/css"href="/bgstyle.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>&lt; MENU &gt;</p>
        </div>
    </div>
    <div id="div_main" align="center">
        <div id="div_page">
            <br><br><p>&lt; PAGE &gt;</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;
    }
}

html css inline block
person Ace    schedule 03.10.2012    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Използвайте vertical-align: top; на .div_game_thumb

Вградените елементи се подчиняват на вертикалното подравняване.

Освен това, ако искате вградени блокове за различни браузъри (IE7+), трябва да го дефинирате по следния начин:

display: inline-block;
*zoom: 1;
*display: inline;

*Забележка: Редът е важен.

person Steven    schedule 03.10.2012

arrow_upward
0
arrow_downward

vertical-align: top спасява положението! Поставете го на .div_game_thumb.

Можете да възстановите малкото поле, което изчезва, след като направите това, като добавите и margin: 2px 0;.

person tuff    schedule 03.10.2012