Kompx.com or Compmiscellanea.com

Float bottom

Windows : Internet Explorer 8.0+, Firefox 1.0+, Google Chrome, Opera 7.5+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 7.5+, SeaMonkey 1.0+ [ 2 ], Hv3.

В CSS нет свойства "float: bottom", однако эффекта можно добиться и некоторыми другими способами. Пример:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Float bottom

HTML / XHTML. Код:

<div class="box1">

<div class="content1">

<div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="menu1">

<p><a href="#">Link 1</a></p>

<p><a href="#">Link 2</a></p>

<p><a href="#">Link 3</a></p>

</div>

</div>

<div class="bottom1">Float bottom</div>

</div>

CSS. Код:

.box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;}

.content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;}

.left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;}

.menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;}

.bottom1 {position: absolute; bottom: 0px; right: 0px;}

/* Дополнительные CSS, просто для приведения примера к некоему внешнему виду */

.box1 {color: #ddd; text-align: center;}

.content1 {background: #bbb;}

.left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

.menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

.menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;}

.menu1 a {color: #ddd; text-decoration: none;}

.menu1 a:hover {text-decoration: underline;}

.bottom1 {padding: 2%; color: #eee; background: #600;}

Всё содержимое веб-страницы находится в контейнере box1. Внутри него два контейнера div:

1. content1 с собственно содержанием слева и меню справа.

2. bottom1 после content1. Он должен оказаться визуально внутри content1, у его нижнего края и оставаться там, на одном месте при изменениях высоты этого контейнера - то есть, быть как бы "float: bottom" в рамках контейнера content1.

С помощью "position: absolute" and "bottom: 0px" bottom1 помещается у нижнего края контейнера box1. В данном случае блок с меню находится справа, так что bottom1 тоже должен быть выровнен по правому краю - это достигается использованием "right: 0px". Если бы меню было слева, bottom1 мог быть выровнен по левому краю - "left: 0px".


[ 1 ]

А так же в Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

А так же в Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

Переименовать папку в DOS

 

Чтобы переименовать папку в DOS командой MOVE: MOVE FOLDER1 FOLDER2 - Переименовывает FOLDER1 в FOLDER2 Этот метод так же работает в консоли Windows. [ 1 ] Протестировано в MS-DOS 6.0+. Однако вполне вероятно, что будет работать и в других версиях MS-DOS или в других DOS'ах.

Float bottom

 

В CSS нет свойства "float: bottom", однако эффекта можно добиться и некоторыми другими способами. Пример: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Код: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Код: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Дополнительные CSS, просто для приведения примера к некоему внешнему виду */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} Всё содержимое веб-страницы находится в контейнере box1. Внутри него два контейнера div: 1. content1 с собственно содержанием слева и меню справа. 2. bottom1 после content1.