«100% с Div» с маржей слева автоматически

enter image description here

У меня есть выравнивание страницы с краем : 0 auto; , который является содержимым страницы. Мне нужно, чтобы моя навигация имела также margin-left: auto; , но также должна идти до конца экрана, даже если пользователь изменяет размер или уменьшает масштаб страницы, этот nav должен действительно идти до конца.

Now I have something like this: http://jsfiddle.net/Dc7XK/

0
nl ja de
Итак, div со 100% шириной - только для вашего фонового изображения? Если это так, вы должны поместить в него содержащий div div с автоматическим маржированием и затем поместить навигацию внутри контейнера.
добавлено автор user1636130, источник
Это вводящий в заблуждение вопрос, пожалуйста, отредактируйте, чтобы предоставить подробную информацию, или он не достоин быть вопросом на этом сайте
добавлено автор sij, источник
Пожалуйста, укажите свой вопрос. Вы просто ничего нам не говорите. Я понимаю, что вам может понадобиться постоянная ширина.
добавлено автор Панайот Толев, источник
Что вы пробовали? - Пожалуйста, покажите хотя бы некоторую попытку сделать то, что вы пытаетесь сделать. Большинство будет видеть этот тег CSS , отметив, что кода нет, а затем перейдите прямо.
добавлено автор George, источник
@MiguelAntunes Должен ли я описать это? Покажите нам, что у вас есть!
добавлено автор George, источник
Мне нравится этот сайт ... @MiguelAntunes дают нам скрипку с тем, где вы сейчас находитесь, мы могли бы найти решение ...
добавлено автор Khez, источник
Теперь у меня есть div со 100% шириной, с фоновым изображением, выровненным справа, и над ним у меня есть мой nav с маркой : 0 auto; background-color: black; , и это работает для большинства разрешений экрана, но я действительно хотел иметь более чистый способ сделать это. Поскольку, если вы уменьшаете изображение, изображение будет придерживаться вправо и будет промежутком между изображением и навигацией.
добавлено автор Miguel Antunes, источник
Извините, ребята, конечно, я пробовал несколько подходов к этому, я думал, что изображение сделает его более ясным, я создал образец скрипта с моим фактическим кодом.
добавлено автор Miguel Antunes, источник

1 ответы

Я бы предложил использовать содержащий div:

<div id="outter">
  <div id="container">
    <div id="navigation">
      lorem ipsum dolor 
    </div>
  </div>
</div>

И css:

#outter{
  width:100%;
  background-color:#00ff00;
}
#container{
   width:500px;
   margin:auto;
   margin-top:20px;
   background-color:#ff0000;
   padding:20px;
}


#navigation{
  width: 100%;
  background-color: black;
  height:16px;
  color:#fff;
}

Установите внешний div на 100%. Затем укажите содержащую div ширину, на которой вы хотите, чтобы страница с полями была установлена ​​автоматически. Наконец, ваша навигация установлена ​​на 100% ширину контейнера! Boom.

http://jsfiddle.net/Dc7XK/2/

Надеюсь, это то, что вам нужно!

1
добавлено
Попробуйте изменить «margin: auto»; to 'float: right;' тогда в CSS контейнера.
добавлено автор user1636130, источник
Это так, но с красным до правого экрана, имея только зеленый слева.
добавлено автор Miguel Antunes, источник
Хорошо, мне удается получить желание, которое я хотел, вы можете проверить его здесь: jsfiddle.net/Cy7rJ Спасибо ,
добавлено автор Miguel Antunes, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)