menu_option {

Question

我正在尝试使用以下div s：id和map_size将两个menu_option放在一起。

每当我重新调整屏幕大小时，menu_option div都会低于map_size。{/ p>

另外，我有一个div id button_position，其中包含多个按钮。

如何将这些按钮放在中间位置，并使按钮名称更大？

以下是我的HTML和CSS提前感谢！

current fiddle

＆＃13;

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;
}

＆＃13;

<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-->

＆＃13;

Answer 1

工作小提琴。 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>

按钮。您可以修改font-size并使用text-align来居中它们。

#button_position{
width: 100px;
height: 80px
position: relative;
      text-align:center;
}
#button_position button {

    font-weigth:bold;    
    font-size:1.3em;
}

Answer 2

第一个问题：你应该将你的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>
<

Answer 3

你也可以把它们变成一张桌子。

<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>

Answer 4

我想我明白你想要实现的目标，但也许我已经接近了。

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的层次结构并将菜单置于绝对位置并向右齐平。

CSS - DIV定位问题

4 个答案:

menu_option {