CSS-DIV定位問題
[英]CSS - DIV positioning problems
問題描述
我試圖將兩個div彼此相鄰放置，並使用以下id ： map_size和menu_option 。
每當我調整屏幕大小時， menu_option div就會低於map_size之一。
另外，我有一個id button_position div ，它將包含多個按鈕。
如何將這些按鈕放置在中間的下方，並使按鈕名稱更大？
以下是我的HTML和CSS預先致謝！
body{ margin:0px auto; width:80%; height:80%; } /*map size*/ #map_size{ width:1190px; height:1300px; background:#0099FF; border-style: solid; border-color: black; position: relative; float:left; } /*menu bar option*/ #menu_option{ width:200px; height:600px; background:#0099FF; border-style: solid; border-color: black; position: relative; float:right; overflow:hidden; } #button_position{ width: 150px; height: 80px position: relative; }
<div id="map_size" class="map_size"> </div> <!-- end div map_Size --> <div id="menu_option"> <h1>Menu Option</h1> <div id="button_position"> <button id="aht">AHT</button> <button id="stats">Statistics</button> </div> </div><!-- end menu_option div-->
4 個解決方案
解決方案1
1 2014-10-21 18:12:53
工作提琴。 http://jsfiddle.net/48kcayqe/2/
為了使div始終並排放置，請將它們放入容器中。 容器的寬度必須大於其他2個div。
<div id="container">
<div id="map_size" class="map_size">
</div> <!-- end div map_Size -->
<div id="menu_option">
</div>
</div>
對於按鈕。 您可以修改字體大小並使用文本對齊來居中。
#button_position{
width: 100px;
height: 80px
position: relative;
text-align:center;
}
#button_position button {
font-weigth:bold;
font-size:1.3em;
}
解決方案2
1 已采納 2014-10-21 18:16:36
對於第一個問題：您應該將DIV放在主DIV中，這樣當屏幕變小時，它就不會改變。 像這樣：
<div id="main">
//your codes
</div>
對於第二個問題：
CSS：
.clear {clear:both;}
button {
margin:5px auto;
font:16px tahoma; //every size you want.
}
的HTML：
<div id="button_position">
<button id="aht">AHT</button>
<div class="clear"></div>
<button id="stats">Statistics</button>
</div>
<
解決方案3
0 2014-10-21 18:16:21
您也可以將它們放入桌子。
<body>
<table>
<tr>
<td>
<div id="map_size" class="map_size">
</div> <!-- end div map_Size -->
</td>
<td>
<div id="menu_option">
<h1>Menu Option</h1>
<div id="button_position">
<button id="aht">AHT</button>
<button id="stats">Statistics</button>
</div>
</div><!-- end menu_option div-->
</td>
</tr>
</table>
<body>
解決方案4
0 2014-10-21 18:18:40
我想我了解您要達到的目標，但也許我已經接近了。
menu_option {
width:200px; height:600px; background:#0099FF; border-style: solid; border-color: black; position: absolute; right:0; overflow:hidden;}
http://jsfiddle.net/48kcayqe/3/
您需要切換兩個div的層次結構，並將菜單定位為絕對和向右刷新。
在div中放置div時出現css問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.