????? ?? ???????? ??????? ???????? ????????? ??????????? ??? ?????????? ??????? ??????? ????????? ??? ? ???? ? ????????????? ?? ??????:
<div style="text-align: center"> <img src="pan.jpg" width="400" height="120" alt="????????" /> </div>
????? ?? ???????? ??????? ???????? ????????? ??????????? ??? ?????????? ??????? ??????? ????????? ??? ? ???? ? ????????????? ?? ??????:
<div style="text-align: center"> <img src="pan.jpg" width="400" height="120" alt="????????" /> </div>
? ?????? "?????????? ???????????????? ????????? (HTML + CSS)" ?????????????? ??????????? ??????, ?? ??? ?????????? ? ???????????????? ???????????? ??????? ??????? ????????. ???????? ????? ?????? ????????? ? ?????? ????????????? ????????, ??? ?????? ????? ????????.
????????? ??????????? ????????? ??????????: ???? ?????????????? ???????, ?????? ???????? ?????????? ????, ???????? ? ??????? ????:
#parent { position: relative; background: lime; width: 200px; height: 200px; } #block { position: absolute; background: blue; bottom: 0; left: 0; right: 0; height: 30px; }
<div id="parent"> <div id="block">Hello, world</div> </div>
????????????? ???????? ???????? CSS-????? position ?? ????????? relative, ??? ????????? ??????????????? ???????? ???????? ???????????? ?????????????. ?????? ???? ??????????? ? ??????? ???? ??? ?????? CSS-?????? left, right, bottom.
?????????? ??? CSS-?????: overflow, overflow-x ? overflow-y ??? ?????????? ???????????? ??????????? ???????? ????????. ??-????????? ???????? ? ???? ?????? ??????????? ? visible, ??????? ????????? ?????????? ????, ???? ??? ?????????? ?? ?????????? ? ???????? ???????. ???? ????? overflow ?????? ???????? auto, ?? ??? ????????????? ? ????? ???????? ?????????????? ? ???????????? ?????? ?????????:
.scrollblock {overflow: auto; width: 200px; height: 50px;}
<div class="scrollblock">?????????? ??? CSS-?????: <em>overflow</em>, <em>overflow-x</em> ? <em>overflow-y</em> ??? ?????????? ???????????? ??????????? ???????? ????????.</div>
????? overflow-x ? overflow-y ????????? ????????? ?????????????? ?????????????? ??? ???????????? ?????? ?????????.
????? ???????? ???????? ??????????? ?????????? ?????????? CSS-??????? ? ?????? HTML-????????. ??? ????? ????? ??????????? ??? ??????????? ?????? ? ???????? class ???????? ????? ??????. ??????? ????????? ?????????:
.bolded {font-weight: bold;} .centered {text-align: center;}
<div class="bolded centered">? ?????? ????? ?? ??????!</div>
?????? ?????????? ????????? ?????????? ????? ?? ??????? ???? ?? ?? ?????????? ?? ??????. ??? ????? ??????? ? ??????? ???? nobr:
<nobr>???? ????? ?????????????? ????? ???????????? ? ???? ??????</nobr>
????? ?? ????? ???????? ??? ?????? CSS-????? white-space, ????????? ?????????? ????????-??????????. ????????:
<span style="white-space: nowrap">???? ????? ?????????????? ????? ???????????? ? ???? ??????</span>
?????? ??????? ????? ?????????????? (??? nobr ??????????? ? ????????? XHTML).