Как да създам и подравня три полета „div“ под менюто?

Опитвам се да създам и подравня три кутии с 1px плътна граница под МЕНЮТО. Искам да са подравнени еднакво, тъй като планирам да поставя изображения в тях. По три на всеки ред. Мога да създам първото поле div и да го подравня, но когато се опитам да създам друго, то просто се припокрива с първото и не мога да го накарам да се премести в ред към следващото. Размерите са "височина" 340px и "ширина" 260px. Тъй като отново ще ИЗПОЛЗВАМ този формат, създавам ли ги като div клас или div ID. Моля, някой може ли да обясни по-подробно. Оценявам го.

Оценявам цялата помощ момчета. Благодаря.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/bgstyle.css" />
<link rel="stylesheet" type="text/css" href="/bgvideos.css" />
<link rel="stylesheet" type="text/css" href="/bgvines.css" />
<title>Puppy Power</title>
</head>
<body>
        <div id="page">
<header></header>
        <div id="dog logo">
    </div>

<ul id="navigation">
        <li><a href="/bgindes.html">Home</a></li>
        <li><a href="/bgVideos.html">Videos</a>
            <ul class="sub">
                <li><a href="/bg#">Vines</a></li>
                <li><a href="/bg#">Pugs</a></li>
                <li><a href="/bg#">Failing Dogs</a></li>
                <li><a href="/bg#">Crazy Dogs</a></li>
                <li><a href="/bg#">Funny Dogs</a></li>

            </ul>
        </li>


        <li><a href="/bg#">Photographs</a></li>    
        <li><a href="/bg#">Articles</a></li>
        <li><a href="/bg#">Contact</a></li>
    </ul>

<div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>

#row {
    width: 267px;
    height: 370px;
    border-top: 1px solid #89cff0;
    border-bottom: 1px solid #89cff0;
    border-left: 1px solid #89cff0;
    border-right: 1px solid #89cff0;
    display: inline-block;
    vertical-align:top;
    margin: 5px 0px 5px 5px;
}

menu html alignment css box
person Benjamin Sunderland    schedule 24.07.2014    source източник
comment
#row е за елемент с id=row в HTML, не виждам такъв :)   -  person G-Cyrillus    schedule 25.07.2014

Отговори (2)


arrow_upward
0
arrow_downward

Ако не съм разбрал погрешно въпроса ви, това вероятно е това, което търсите:

<div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

.cell {
    width: 267px;
    height: 370px;
    border: 1px solid #89cff0;
    display: inline-block;
    margin: 5px 0px 5px 5px;
}

Ето пример за това как ще изглежда: http://codepen.io/anon/pen/xsKwq

Надявам се да съм бил полезен

person Lo.m    schedule 24.07.2014

arrow_upward
0
arrow_downward

мислихте ли за падащо меню?

Имам код за това:

<!DOCTYPE html>
<html>
<head>
    <title> Game </title>
<style>

body{
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    font-family: Arial;
    font-size: 18px;
    background-color: rgb(232, 147, 0);
}

#nav{
    background-color: #333;
}
#nav_wrapper{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#nav ul li{
    display: inline-block;
}
#nav ul li:hover{
    background-color: yellow;
}
#nav ul li a,visited{
    color: red;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#nav ul li a:hover{
    color: blue;
    text-decoration: none;
}
#nav ul li:hover ul{
    display: block;
}
#nav ul ul{
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0px;
    margin-left: -5px;
} 
#nav ul ul li{
    display: block;
}
#nav ul ul li a,visited{
    color: red;
}
#nav ul ul li a:hover{
    color: #099;
}
</style>
</head>
<script>
</script>
<body>
    <h1> About the code </h1>
    <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="/bg#">Game</a>
                    <ul>
                        <li><a href="/bgC:/Users/Troike/Desktop/ScienceFairJavaScript/Ordinate.html">Play the game</a></li>
                        <li><a href="/bgC:/Users/Troike/Desktop/ScienceFairJavaScript/HowToPlay.html">How to play</a></li>
                        <li><a href="/bgC:/Users/Troike/Desktop/ScienceFairJavaScript/SourceCode.html">Source code</a></li>
                    </ul>
                </li><li>
                <a href="/bg#">About the Creator</a></li>
            </ul>
    </div>
</body>
</html>

Можете да редактирате този код, независимо дали искате менюто да направи нещо; в противен случай не е нужно да го редактирате.

person Random Channel    schedule 15.01.2016