#html #css
Вопрос:
Поэтому я пытаюсь, чтобы содержимое заголовка было выровнено как пробел, чтобы отправить один слева, а другой справа.
body { min-height: 960px; background-color: #222; } header { min-height: 250px; display: flex; justify-content: space-between; } #hero { color: white; font-size: 155px; font-family: 'Elsie' cursive; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; } #logo { height: 36px; width: 67px; } .headline::before { content: "design"; opacity: 0; animation-name: animate; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; animation-delay: 0.5s; position: relative; display: inline-block; } @keyframes animate { 11.1% {content:"design"; opacity: 0; transform: translateY(0);} 22.2% {content: "design"; opacity: 1; transform: translateY(0);} 33.3% {content:"design"; opacity: 0; transform: translateY(20px);} 44.4% {content: "build"; opacity: 0; transform: translateY(0);} 55.5% {content:"build"; opacity: 1; transform: translateY(0);} 66.6% {content: "build"; opacity: 0; transform: translateY(20px);} 77.7% {content: "innovate"; opacity: 0; transform: translateY(0);} 88.8% {content: "innovate"; opacity: 1; transform: translateY(0);} 99.9%{content: "innovate"; opacity: 0; transform: translateY(20px);} } lt;headergt; lt;img id="logo" src="images/logo-8.png" alt=""gt; lt;navgt; lt;a href="#"gt;Aboutlt;/agt; lt;a href="#"gt;Worklt;/agt; lt;a href="#"gt;Contactlt;/agt; lt;/navgt; lt;/headergt; lt;section id="hero"gt; lt;div id="lets_wrapper"gt; lt;h1 id="lets"gt;let'slt;/h1gt; lt;/divgt; lt;divgt; lt;h1 class="headline"gt;lt;/h1gt; lt;/divgt; lt;div id="together_wrapper"gt; lt;pgt;togetherlt;/pgt; lt;/divgt; lt;/sectiongt; Я также попытался установить высоту и ширину для дочерних элементов, но это, похоже, не работает, логотип и текст продолжают накладываться друг на друга в верхнем левом углу. Чуть ниже находится еще один тег раздела с атрибутом flexbox, отображающим сгиб, перенос, столбец и выравнивание по центру элементов. Что я делаю не так? Более позднее редактирование: Я добавил весь код, который у меня есть прямо сейчас, так как я думаю, что, возможно, что-то противоречит.
Комментарии:
1. Добро пожаловать в Stack Overflow! Пожалуйста, проясните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. Поскольку это написано в настоящее время, трудно точно сказать, о чем вы просите.
Ответ №1:
Я думаю, что ваш код работает нормально.
header { min-height: 250px; display: flex; justify-content: space-between; } lt;headergt; lt;img id="logo" src="images/logo-8.png" alt="This is Logo"gt; lt;navgt; lt;a href="#"gt;Aboutlt;/agt; lt;a href="#"gt;Worklt;/agt; lt;a href="#"gt;Contactlt;/agt; lt;/navgt; lt;/headergt; Комментарии:
1. Здесь немного проб и ошибок, но что произойдет, если вы поместите команды flex и пробел между ними в CSS навигации, а не в CSS заголовка?
2. Ничего не меняется. И разве это не оправдывало бы только содержимое навигатора, а не саму навигацию и изображение?
Ответ №2:
Я обнаружил проблему внутри своего reset.css файла, когда загрузил его после своего style.css , и он установил заголовок для отображения: block . Ошибка нуба, извините :))