HTML DIV按钮定位

Question

我正在尝试完成一些简单的事情，这令人惊讶地花了一些时间才弄清楚。 我是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容器出现在彼此的顶部，两个容器都在屏幕左侧对齐。 这使我感到困惑，因为所有其他样式元素都在起作用（边框的颜色，宽度等），我感觉有一个简单的解决方法，因此如果有人可以帮助这位初学者，我将不胜感激。 谢谢。

Answer 1

如果对div使用Float会更简单（完成后需要确保清除了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>

Answer 2

假设您要在屏幕右侧显示“来源”

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

HTML DIV按钮定位

问题描述

2 个解决方案

解决方案1
0 2013-11-28 01:32:25

解决方案2
0 2013-11-28 01:59:41

HTML DIV按钮定位

问题描述

2 个解决方案

解决方案1 0 2013-11-28 01:32:25

解决方案2 0 2013-11-28 01:59:41

解决方案1
0 2013-11-28 01:32:25

解决方案2
0 2013-11-28 01:59:41