Ряд div в левом нижнем углу родительского div

Question

Ряд div в левом нижнем углу родительского div

0

Я хотел бы, чтобы кнопка с надписью 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>

Michael LeVan 12 нояб. 2013, в 07:04

Источник

0

Вы получите более быстрые ответы, если включите jsFiddle в свой вопрос.
Steve Wellens 12 нояб. 2013, в 05:30
0

jsfiddle.net/Q94Cw/2
Mohsen Safari 12 нояб. 2013, в 05:33
0

@melevan: почему ты включаешь div в раздел head? Прочитайте это Глобальная структура документа HTML . Попробуйте установить position absolute/fixed и bottom свойство.
super 12 нояб. 2013, в 05:35

Показать ещё 1 комментарий

Теги:

html

css

4 ответа

Ещё вопросы

Вы получите более быстрые ответы, если включите jsFiddle в свой вопрос.
@melevan: почему ты включаешь div в раздел head? Прочитайте это Глобальная структура документа HTML . Попробуйте установить position absolute/fixed и bottom свойство.

Michael J. Anderson · Answer 1 · 2013-11-12T02-54-00.000Z

Добавьте это в свой 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>

Mohsen Safari · Answer 2 · 2013-11-12T04-14-00.000Z

измените свой 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;
}

Joke_Sense10 · Answer 3 · 2013-11-12T02-48-00.000Z

Вы можете сделать это без использования position:absolute.ie, установив 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/

dsfg · Answer 4 · 2013-11-12T02-46-00.000Z

Вы можете использовать тег nav для создания горизонтальных списков.