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

如果你使用Float作为divs会更简单（你需要确保在完成后清除浮动）：

<%!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 个答案: