父 div 左下角的 div 行答案

【问题标题】：Row of divs in bottom left corner of parent div父 div 左下角的 div 行
【发布时间】：2013-11-12 05:29:32
【问题描述】：

我希望Divs 标记按钮位于父级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>

【问题讨论】：

如果您在问题中包含 jsFiddle，您将获得更快的答案。
jsfiddle.net/Q94Cw/2
@melevan：为什么要在 head 部分包含 div。阅读此The global structure of an HTML document。尝试设置position absolute/fixed 和bottom 属性。

标签： html css

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

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

【讨论】：