Так близко, но я не могу заставить работать фиксированный нижний колонтитул с тремя колонками...

Я извиняюсь, если это было обращено в другом месте, но я искал повсюду и не могу понять это.

Я пытаюсь иметь три ссылки в нижней части страницы, которые будут исправлены, то есть независимо от того, насколько большой будет страница или окно, они всегда будут вдоль нижней части, на уровне выше остального содержимого страницы. Я хочу, чтобы одна ссылка была выровнена по левому краю, одна - по центру, а другая - по краям страницы (я установил поля тела равными 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.

Обновление должно произойти рано или поздно, чем раньше, тем лучше.

Другие вопросы по тегам