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

Question

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

0

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

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

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

gecko25 28 нояб. 2013, в 03:00

Источник

0

Mistype в CSS. postion: absolute; должна быть position: absolute; , Также вы должны добавить right: 0; к # #Sources .
akinuri 28 нояб. 2013, в 01:40
0

аааааа знал, что это легко исправить .. не могу поверить, что я этого не видел. Спасибо!
gecko25 28 нояб. 2013, в 15:52

Теги:

html

css

button

position

2 ответа

Ещё вопросы

Mistype в CSS. postion: absolute; должна быть position: absolute; , Также вы должны добавить right: 0; к # #Sources .
аааааа знал, что это легко исправить .. не могу поверить, что я этого не видел. Спасибо!

Alexander Kimaru · Answer 1 · 2013-11-27T23-29-00.000Z

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

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

Web Develop Wolf · Answer 2 · 2013-11-27T22-51-00.000Z

Было бы намного проще, если бы вы использовали Float для divs (вам нужно убедиться, что вы очистите 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>