Как выровнять текст по ширине
Что значит выровнять текст по ширине? Это значит, что он будет прижат к обоим сторонам, его края слева и справа будут ровными. Чтобы браузер не растягивал пробелы, отчего текст становится плохо читаемым, нужно настроить перенос слов. Реализуется он очень просто с помощью того же CSS. Даже дефисы при необходимости ставятся с соблюдением правил русского языка.
<style> #text { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */ text-align: justify; } </style> <div id="text" lang="ru">содержимое</div>
Как выровнять меню по ширине
Обратили внимание, что текст на последней строке не растягивается по всей ширине? А если строка всего одна, то она и будет последней. Вот тут и пригодиться свойство text-align-last. Оно управляет только поведением крайней строки абзаца.
<style> #menu { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } #menu a { display: inline-block; white-space: nowrap; } </style> <nav id="menu"> <a href="#1">пункт меню 1</a> <a href="#2">пункт меню 2</a> <a href="#3">пункт меню 3</a> </nav>
Поддержка браузерами ограничена, но можно немного пошаманить:
<style> #menu1 { border: 1px solid #ccc; /* предотвращаем схлопывание */ text-align: justify; } #menu1 a { position: relative; top: 1.6em; /* ваше значение line-height */ display: inline-block; white-space: nowrap; } #menu1:after { /* искусственно добавляем последнюю строчку */ content: ''; display: inline-block; width: 100%; } #menu1:before { content: ''; display: block; width: 100%; margin-bottom: -1.6em; /* ваше значение line-height */ } </style> <nav id="menu1"> <a href="#1">пункт меню 1</a> <a href="#2">пункт меню 2</a> <a href="#3">пункт меню 3</a> </nav>
Как выровнять картинки по ширине
<style> #img { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } </style> <div id="img"> <img src="" alt=""/> <img src="" alt=""/> <img src="" alt=""/> </div>
Как равномерно распределить блоки, если сайт резиновый
Вот возможности, которые предоставляют float: left; и display: table;. В данном примере если блоки не помещаются, то переходят на новую строку. flexbox всё же предоставляет больше возможностей.
<style> #div { background: #fff5d7; text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } #div figure { display: inline-block; margin: 10px 0; padding: 5px; background: #fff; vertical-align: top; } #div img, #div figcaption { display: block; margin: 0 auto; text-align: center; -moz-text-align-last: center; text-align-last: center; } #div img { max-width: 190px; } #div figcaption { width: 190px; } @media (max-width: 440px) { #div { text-align: center; -moz-text-align-last: center; text-align-last: center; } #div figure { display: block; } #div img { max-width: auto; } #div figcaption { width: auto; } } </style> <div id="div"> <figure> <img src="" alt=""/> <figcaption>аннотация</figcaption> </figure> <figure> <img src="" alt=""> <figcaption>аннотация</figcaption> </figure> <figure> <img src="" alt=""> <figcaption>аннотация</figcaption> </figure> <figure> <img src="" alt=""> <figcaption>аннотация</figcaption> </figure> </div>
4 комментария:
У меня вот какая проблема.
div class="left_block" /div
div class="right_block" /div
style
div.left_block {
float:left;
width:200px;
height:55px;
background-color:red;
}
div.right_block {
float:left;
width:200px;
background-color:green;
height:55px;
margin-left:25%;
}
/style
Имеется код. Я хотел бы что-бы зелёный ДИВ не доходил бы до красного примерно сантиметр. То есть сначала он смещается. Когда между ними 1 см. он просто прекращал сближение. Появлялась бы горизонтальная прокрутка. А не прыгал бы вниз как теперь. Не подскажите можно ли так сделать. Буду очень благодарен.
До свидания.
<div class="vyrovnyat">
<div class="left_block">какой-то текст</div>
<div class="right_block">какой-то текст</div>
</div>
<style>
.vyrovnyat {
min-width:450px;
}
.vyrovnyat:after { /*очистить float */
content: "";
display: table;
clear:both;
}
div.left_block {
float:left;
width:200px;
height:55px;
background-color:red;
}
div.right_block {
float:right;
width:200px;
background-color:green;
height:55px;
}
</style>
Блииин! Огромное Вам спасибо. Вы столько раз меня уже выручали. Благодарю Вас. СПАСИБО!!!