CSS divs бок о бок

Question

CSS divs бок о бок

0

Я понимаю, что здесь есть много материала, относящегося к этой проблеме, но мне все еще трудно помещать три div бок о бок, а не складывать друг на друга.

http://jsfiddle.net/wkQv6/

<body>
    <div id='boom'>

    <div id='menutab' class='navbar'>
    Menu
        </div>
    <div class='navbar' id='storytab'>
    Our Story
    </div>
    <div class='navbar' id='contacttab'>
        Contact
        </div>

    </div>
</body>

#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}

div.navbar{width:100px;
    float:left;

    display:inline-block;
background-color:black;
opacity:.7;
    position:fixed;
    z-index:1;
    height:25px;
    border-radius:0px;
    border-right:white;
    color:white;
    font-weight:bold;
    text-align:center;
    line-height:25px;
    vertical-align:bottom;
}

user3003487 31 дек. 2013, в 08:04

Источник

0

попробуйте это jsfiddle.net/wkQv6/1
Ashoka Mondal 31 дек. 2013, в 06:24

Теги:

html

css

css-float

5 ответов

2

Измените свой css как ниже

#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03
/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}



div {
    float:left;
    padding-right:10px;
    color:#FFF;
}

Manish Jangir 31 дек. 2013, в 03:24

0

Фиксирование положения div перезапишет их друг на друге
Manish Jangir 31 дек. 2013, в 06:23

0

Position:fixed; является причиной вашей проблемы

Измените CSS соответственно.

PRASHANT BADERIYA 31 дек. 2013, в 05:07

0

HTML

Добавлена обертка вокруг пунктов меню

<div id='boom'>
    <div class="menu">
        <div id='menutab' class='navbar'>Menu</div>
        <div class='navbar' id='storytab'>Our Story</div>
        <div class='navbar' id='contacttab'>Contact</div>
    </div>
</div>

CSS

Измените position to relative и если вы хотите, чтобы она была в центре, просто добавьте меню css, как показано на рисунке, теперь пункты меню будут находиться в центре независимо от размера экрана, не требуется жестко закодированных px

.menu {
    width: 50%;
    margin: 0 auto;
}

div.navbar {
    width:100px;
    float:left;
    display:inline-block;
    background-color:black;
    opacity:.7;
    position:relative;
    z-index:1;
    height:25px;
    border-radius:0px;
    border-right:white;
    color:white;
    font-weight:bold;
    text-align:center;
    line-height:25px;
    vertical-align:bottom;
}

демонстрация

Raunak Kathuria 31 дек. 2013, в 04:22

0

Вам нужно небольшое изменение в вашем css

внутри этого

div.navbar{

   Remove position:fixed;

}

Его рабочий штраф

Pavan kumar 31 дек. 2013, в 04:19

Ещё вопросы

Фиксирование положения div перезапишет их друг на друге

Manoj · Accepted Answer · 2013-12-31T04-38-00.000Z

Используйте left property CSS left property left задает левый край элемента, попробуйте этот код:

Скрипт:

CSS:

 #menutab
    {
    left:100px;
    }
    #storytab
    {
    left:250px;
    }
    #contacttab
    {
     left:400px;
    }