CSS並排划分
[英]CSS divs side-by-side
問題描述
我意識到這里已經有很多關於這個問題的材料，但是我仍然無法並排放置三個div而不是堆疊在一起。
<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;
}
5 個解決方案
解決方案1
2 2013-12-31 06:22:23
如下更改您的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;
}
解決方案2
0 已采納 2013-12-31 06:25:53
使用CSS left property ，left屬性設置元素的左邊緣，試試這段代碼：
小提琴 ：
CSS：
#menutab
{
left:100px;
}
#storytab
{
left:250px;
}
#contacttab
{
left:400px;
}
解決方案3
0 2013-12-31 06:29:13
Position:fixed; 是你的問題的原因
相應地更改CSS 。
解決方案4
0 2013-12-31 06:30:35
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更改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;
}
解決方案5
0 2013-12-31 06:32:34
你需要對你的CSS進行小的改動
在里面
div.navbar{
Remove position:fixed;
}
它的工作正常
“臭名昭着”的CSS：2 divs並排，crossbrowser版本（？）
[英]The “infamous” CSS: 2 divs side-by-side, crossbrowser edition(?)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.