Я пытаюсь разместить два div s рядом друг с другом со следующими id s: map_size и menu_option.CSS-DIV проблемы позиционирования

Всякий раз, когда я изменяю размер экрана, menu_optiondiv идет ниже map_size.

Кроме того, у меня есть один div с idbutton_position, который будет содержать несколько кнопок.

Как разместить эти кнопки внизу друг от друга по центру и увеличить название кнопки?

Ниже приведен мой HTML и CSS заранее!

current fiddle

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> \t 
 
    <button id="stats">Statistics</button> \t 
 
    </div> 
 

 
</div><!-- end menu_option div-->

источник

2014-10-21 mario

Это aaaaaaa MARIOOOOO! –

Это не проблема с DIV. Проблема в том, что ваш браузер недостаточно велик, чтобы справиться с этим. Посмотрите на ширину, которую вы установили. – Aibrean

для первой задачи: вы должны положить DIVs в основном 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> 
<

источник

2014-10-21 18:16:36 IVIajid

awesome это сработало спасибо много! – mario

Рад помочь @mario :) – IVIajid

Работа скрипку. http://jsfiddle.net/48kcayqe/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; 
}

источник

2014-10-21 18:12:53

круто спасибо большое! – mario

Вы также можете внести их в стол.

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

источник

2014-10-21 18:16:21

хорошая идея, но я не хочу использовать таблицы, спасибо – mario

Я думаю, я понимаю, что вы пытаетесь достичь, но может быть, я рядом.

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/

Вы должны включить иерархию ваших двух див и расположить меню абсолютных и по правому краю.

источник

2014-10-21 18:18:40 knice

вы добавили опцию меню внутри другого – mario

CSS-DIV проблемы позиционирования

ответ

menu_option {

Смежные вопросы