HTML DIV Позиционирование кнопок

Я пытаюсь выполнить что-то простое, что удивительно усложняется, чтобы понять. Я очень новичок в HTML/CSS/JSP. Все, что я хотел бы сделать, это создать div в левой части экрана, чтобы содержать 8 кнопок и div на правой стороне страницы, чтобы содержать еще 8 кнопок.HTML DIV Позиционирование кнопок

<%!int buttonWidth=250; 
int buttonHeight=75;%> 

<style type="text/css"> 
    .button {color:blue; 
      font-size: large; 
      width:<%=(buttonWidth+"px")%>; 
      height:<%=(buttonHeight+"px")%>} 

    #TVs {top:0px; 
      left: 0px; 
      width: <%=(buttonWidth*2+"px")%>; 
      height: <%=(buttonHeight*8)+"px"%>; 
      postion: absolute; 
      border: 2px solid green} 

    #Sources {top:0; 
      left: <%=(buttonWidth*3+"px")%>; 
      width: <%=(buttonWidth*2+"px")%>; 
      height: <%=(buttonHeight*8)+"px"%>; 
      postion: absolute; 
      border: 2px solid red} 
</style> 
</head> 


<body> 
<h2>Poseidon TV Control</h2> 
<hr/> 

<div id="TVs"> 
    <button id="TV1" class="button">TV1</button> 
    <button id="TV2" class="button">TV2</button> 
</div> 

<div id="Sources"> 
    <button id="DISH1" class="button">DISH1</button> 
    <button id="DISH2" class="button">DISH2</button> 
</div>

Контейнеры-контейнеры отображаются сверху друг друга, оба расположены в левой части экрана. Это меня смущает, поскольку все остальные элементы стиля работают (цвет границы, ширина и т. Д.). У меня есть ощущение, что есть легкое исправление, поэтому, если кто-то может помочь этому новичку, я был бы очень благодарен. Благодарю.

источник

2013-11-28 gecko25

Mistype in CSS. 'postion: absolute;' должно быть 'position: absolute;'. Также вы должны добавить 'right: 0;' to '# Sources'. – akinuri

ах ничего себе. знал, что это легкое решение. Не могу поверить, что я этого не видел. благодаря! – gecko25

Было бы намного проще, если бы вы использовали Float для дивы (вы должны убедиться, что вы снимите поплавок, когда вы закончите):

<%!int buttonWidth=250; 
int buttonHeight=75;%> 

<style type="text/css"> 
    .button {color:blue; 
      font-size: large; 
      width:<%=(buttonWidth+"px")%>; 
      height:<%=(buttonHeight+"px")%>} 

    #TVs { 
      width: <%=(buttonWidth*2+"px")%>; 
      height: <%=(buttonHeight*8)+"px"%>; 
      border: 2px solid green}; 
      float:left; 

    #Sources { 
      width: <%=(buttonWidth*2+"px")%>; 
      height: <%=(buttonHeight*8)+"px"%>; 
      float:left; 
      margin-left:<%=(buttonWidth*3+"px")%>; 
      border: 2px solid red} 
</style> 
</head> 


<body> 
<h2>Poseidon TV Control</h2> 
<hr/> 

<div id="TVs"> 
    <button id="TV1" class="button">TV1</button> 
    <button id="TV2" class="button">TV2</button> 
</div> 

<div id="Sources"> 
    <button id="DISH1" class="button">DISH1</button> 
    <button id="DISH2" class="button">DISH2</button> 
</div>

источник

2013-11-28 01:32:25

Предполагая, что вы хотите Sources на правой стороне экран

#Sources {top:0; 
      right: <%=(buttonWidth*3+"px")%>; 
      width: <%=(buttonWidth*2+"px")%>; 
      height: <%=(buttonHeight*8)+"px"%>; 
      postion: absolute; 
      border: 2px solid red}

источник

2013-11-28 01:59:41

HTML DIV Позиционирование кнопок

ответ

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