Question

我希望Div标记的按钮位于父div的左下角，而不是现在的位置（左上角）。有没有办法在不单独使用每个div的绝对位置的情况下执行此操作？这是HTML和CSS。

CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}

HTML

<div id="banner">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
</div>

Answer 1

将此添加到您的css：

#buttonrow {
    position: absolute;
    bottom: 0;
    right: 0;
}

更改标记以包含包装div：

<div id="banner">

<div id="buttonrow">

<div class="button" >Home</div>
<div class="button">About Us</div>
<div class="button">Contact Us</div>
<div class="button">Disciplines</div>

</div>

</div>

Answer 2

像这样更改您的HTML和CSS：

jsFiddle

<强> HTML

<div id="banner">
    <div id="container">
        <div class="button" >Home</div>
        <div class="button">About Us</div>
        <div class="button">Contact Us</div>
        <div class="button">Disciplines</div>
    </div>
</div>

<强> CSS

.button
{
color: blue;
background-color: green;
width: 200px;
font-size: 20pt;
font-family: "Comic Sans";
position: relative;
float: left;
bottom: 0;
}

.button:hover
{
color: red;
background-color: purple;
 }     
#banner
{
height: 300px;
width: 80%;
background-color: pink;
position: absolute;
left: 10%;
right: 10%;
}
#container{  /*  add this class  */
    position:absolute;
    bottom:0;
}

Answer 3

您可以在不使用position:absolute的情况下执行此操作。即设置margin。

试试这个：

.button {
background-color: #008000;
bottom: 0;
color: #0000FF;
float: left;
font-family: "Comic Sans";
font-size: 20pt;
margin-top: 268px;
position: relative;
width: 200px;
}

演示：http://jsfiddle.net/z5UNd/

Answer 4

您可以使用nav标签创建水平列表视图。

父div的左下角div的行

4 个答案: