набора выравнивание DIV вниз

как я могу сделать divleft3 нижней и left4 снизу Align на дне (как left2 снизу), а также растягивать left2 сверхуdiv над всей шириной?набора выравнивание DIV вниз

Я пробовал vertical-align: bottom;, но это не поможет.

веселит, Пит

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
<title>test</title> 
 
<style type="text/css"> 
 
.wrapper{ 
 
    margin: 0px auto; 
 
    width: 940px; 
 
    background-color: #28cf21; 
 
} 
 

 
.header{ 
 
\t width: 100%; 
 
\t background-color: #12bf81; 
 
\t } 
 

 
.left1{ 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 220px; 
 
    height: 500px; 
 
    background-color: #fc0234; 
 
} 
 

 
.left2{ 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 220px; 
 
    height: 500px; 
 
    background-color: #f78325; 
 
} 
 

 
.left2oben{ 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 220px; 
 
    height: 250px; 
 
    background-color: #f78325; 
 
} 
 

 
.left2unten{ 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 220px; 
 
    height: 250px; 
 
    background-color: #f11325; 
 
} 
 

 
.left3{ 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 220px; 
 
    height: 250px; 
 
    background-color: #f78325; 
 
} 
 

 
.left4{ 
 
    float: left; 
 
    width: 220px; 
 
    height: 250px; 
 
    background-color: #f78325; 
 
} 
 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    font-size: 90%; 
 
    background-color: #00ccff; 
 
} 
 
</style> 
 

 
</head> 
 
<body> 
 

 
<div class="wrapper"> 
 

 
    <div class="header"> 
 
     header 
 
    </div> 
 
    
 
    <div class="left1"> 
 
     left1 
 
    </div> 
 
    
 
    <div class="left2"> 
 
      <div class="left2oben"> 
 
     \t left2 top 
 
    \t \t \t </div> 
 
     
 
      <div class="left2unten"> 
 
     \t left2 bottom 
 
    \t \t \t </div> 
 
    </div> 
 
    
 
    <div class="left3"> 
 
     left3 bottom 
 
    </div> 
 
    
 
    <div class="left4"> 
 
     left4 bottom 
 
    </div> 
 

 
</div> 
 
</body> 
 
</html>

источник

2016-02-08 Pete Park

Вы пытались использовать "снизу" в CSS?

.left3{ 
    float: left; 
    margin-right: 20px; 
    width: 220px; 
    height: 250px; 
    background-color: #f78325; 
    position: absolute; 
    bottom:0; 
} 


.wrapper{ 
    margin: 0px auto; 
    width: 940px; 
    background-color: #28cf21 
    Position:relative; 
}

Когда оба .left3.left4 и установлены на float:left будет вопрос двух перекрывающихся. для этого вы можете использовать разные настройки поплавка или использовать left или right в css так же, как мы использовали bottom.

Объяснение

В CSS, мы устанавливаем bottom 0 для .left3 и .left4, это означает, что эти две дивы, являются 0 пикселей от дна. То же самое можно использовать для top, right left. Для того, чтобы эта функция работала, положение должно быть абсолютным.

Кроме того, это хорошая идея, чтобы привыкнуть помещать полуточку в конце каждого утверждения в css, независимо от того, является ли ее заключительная инструкция в скобках.

ОБНОВЛЕНИЕ Установите положение для обертывания div относительно, а затем положение для внутреннего div будет абсолютным. Позиционирование означает, что содержимое может перекрывать друг друга, так что вы должны поддерживать фиксированные высоты для содержания

источник

2016-02-08 00:25:34

Я пробовал, но затем '' .left3' и .left4 'установлены в нижней части всей страницы, а не внутри' .wrapper' 'div' –

@PetePark извините, я неправильно понял вопрос –

@PetePark обновил ответ –

надеюсь, что он может вам помог :)

.left3{ 
    float: left; 
    margin-right: 20px; 
    width: 220px; 
    height: 250px; 
    background-color: #f78325; 
    bottom: 0!important; 
    position: absolute; 

} 

.left4{ 
    float: left; 
    width: 220px; 
    height: 250px; 
    background-color: #f78325; 
    position: absolute; 
    bottom: 0; 
    left:38%; 
}

источник

2016-02-08 03:22:08

набора выравнивание DIV вниз

ответ

Смежные вопросы