Так близко, но я не могу заставить работать фиксированный нижний колонтитул с тремя колонками...
Я извиняюсь, если это было обращено в другом месте, но я искал повсюду и не могу понять это.
Я пытаюсь иметь три ссылки в нижней части страницы, которые будут исправлены, то есть независимо от того, насколько большой будет страница или окно, они всегда будут вдоль нижней части, на уровне выше остального содержимого страницы. Я хочу, чтобы одна ссылка была выровнена по левому краю, одна - по центру, а другая - по краям страницы (я установил поля тела равными 20 пикселей).
После долгих раздумий, проб и ошибок я подошел довольно близко, но, похоже, не могу получить правильные поля вокруг текста. Я думаю, что было бы более понятно, если я просто отправлю ссылку на страницу в том виде, в каком она есть сейчас - не обращайте внимания на цветной фон:)
http://www.chrissvensson.info/ces85/033
Я перепробовал все, что мог придумать. Если у кого-то есть какие-либо предложения, я был бы очень признателен. И не стесняйтесь говорить мне, что я все об этом говорю неправильно!
Вот HTML:
<div class="bottom-nav">
<h2 class="previous-link">Previous</h2>
<h2 class="index-link">Index</h2>
<h2 class="next-link">Next</h2>
</div>
Вот CSS:
.bottom-nav {
position:fixed;
bottom:0px;
width:100%;
margin: 0 -20px 0 -20px;
background-color: red;
}
.previous-link {
width: 25%;
float: left;
z-index:1999;
background-color: blue;
margin-left: 0;
}
.index-link {
margin: auto;
z-index:1999;
width: 50%;
text-align: center;
float: left;
background-color: yellow;
}
.next-link {
width: 25%;
float: right;
z-index:1999;
text-align: right;
background-color: green;
margin-right: 0;
}
Заранее спасибо!
2 ответа
Попробуй добавить .previous-link a {margin-left:20px}
или же .previous-link a {padding-left:20px}
,
и то же самое на других ссылках. Таким образом, вы не столько связываетесь с div, но перемещаете ссылку туда, куда хотите.
Надеюсь, поможет!
Попробуйте использовать модель flex-box. http://caniuse.com/flexbox говорит, что 72,93 % веб-пользователей хотя бы частично поддерживают его, и это довольно большое население. Проверьте его ссылку на площадку flexbox.
Если ваши клиенты, вероятно, будут иметь современные браузеры, это отличный выбор. Для тех из ваших потенциальных клиентов, у которых нет современного браузера, вы можете просто переслать / связать их здесь и / или browsehappy.com. Или вы можете воспользоваться уведомлением browser-update.org или кодом updateyourbrowser.net.
Обновление должно произойти рано или поздно, чем раньше, тем лучше.