Элементы, переполняющие линию

ProgramBox

Элементы, переполняющие линию

Post author:admin
Запись опубликована:5 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я считаю, что мое понимание позиционирования вызывает у меня множество проблем:

«Пожертвовать» в заголовке навигации продолжает переполняться и не остается встроенным. Я экспериментировал с дисплеем:встроенный блок, но он все еще не работает. Я пытаюсь обеспечить, чтобы элементы навигационной панели реагировали на страницы разного размера и оставались в одной строке.
Раздел «Наша работа» не будет располагаться по центру в середине страницы, даже когда я попробовал margin:auto
Не удалось правильно выровнять элементы в проблемном разделе. Я бы хотел, чтобы строка 2 была на 10% ниже строки 1, так что это похоже на настройку таблицы 2×2.

Я уже некоторое время борюсь с этим, поэтому, если у кого — нибудь есть какие-либо идеи о том, как решить любую из этих проблем, и предложения по продвижению вперед-это было бы очень ценно!

 *{  margin:0;  padding:0; }  header{  font-family:'Ubuntu';   }  body{  font-family: 'Montserrat';  text-align: left; }   /* Header */  header{  position: fixed;  width:100%;  height:122px;  background:#FFFFFF;  z-index:1;   }  .wrapper{ width:90%; margin:0 auto; }  .logo{ width:30%; float: left; text-align:left; line-height: 122px;  }   nav{ float: center; line-height: 122px;  }  nav a{ font-family:'Ubuntu'; font-weight: 500; font-size:calc(50px 1vw); line-height: calc(23px 1vw); text-decoration: none; letter-spacing: 4px; color:#616161; padding: 20px 20px;  }  .links:hover {  background:#F3EA65; }  .CTA{ padding: 15px 100px; border: none; background: #F28A31 ; border-radius: 15px ; font-family: Ubuntu; font-style: normal; font-weight: bold; line-height: calc(13px 1wv); font-size: calc(20px 1vw); color: #FFFFFF; text-align: center; letter-spacing: 0.5px; display: inline-flex; }  .CTA:hover {  background-color: #F3EA65;  color: #FFFFFF;  cursor: pointer; }   /*Our work*/  #ourwork{ background:#fff; position:absolute; width: 932px; height: 92px; top: 700px; left: 50%; padding:10px; }  /*Problem section */  #problembackground{ position: absolute; width: 100%; height: 561px; top:852px; background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);  }  #problemcontent{ position: relative; top: 25%; left:5%; }  .row1{ position: relative; display: inline-block; padding-right:10% }  .row2{ position: relative; display: inline-block; top:10%; }

 lt;bodygt;  lt;headergt;  lt;div class="wrapper"gt;  lt;div class="logo"gt;  lt;a href="...."gt;  lt;img src="Home.png" alt="Logo" width="25%";gt;  lt;/agt;  lt;/divgt;  lt;navgt;  lt;a class="links" href="#"gt;aboutlt;/agt;  lt;a class="links" href="#"gt;our teamlt;/agt;  lt;a class="links" href="#"gt;who we helplt;/agt;  lt;a class="links" href="#"gt;get involvedlt;/agt;  lt;a href="#"gt;  lt;button class="CTA"gt;Contactlt;/buttongt;  lt;/agt;  lt;a href="#"gt;  lt;button class="CTA"gt;Donatelt;/buttongt;  lt;/agt;  lt;/navgt;  lt;/divgt;  lt;/headergt;    lt;maingt;   lt;sectiongt;  lt;div id="ourwork"gt;  lt;h4gt;OUR WORKlt;/h4gt;lt;brgt;  lt;p id="largertext"gt;  Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,lt;brgt; medium-term accommodation in Brisbane to young people aged from 16-21 years oldlt;brgt; who are homeless or at risk of homelessness.   lt;/pgt;  lt;/divgt;  lt;/sectiongt;    lt;sectiongt;  lt;div id="problembackground"gt;  lt;div id="problemcontent"gt;  lt;h2 id="the problem"gt;the problemlt;/h2gt;lt;brgt;  lt;div id="p1" class="row1"gt;  lt;h3gt;1 in 5lt;/h3gt;  lt;pgt;young Australians report high levels oflt;brgt; psychological distresslt;/pgt;  lt;/divgt;  lt;div id="p2" class="row1"gt;  lt;h3gt;28 000lt;/h3gt;  lt;pgt;12 to 24-year olds are homeless on any givenlt;brgt; night in Australialt;/pgt;  lt;/divgt;  lt;div id="p3" class="row2"gt;  lt;h3gt;1 in 6lt;/h3gt;  lt;pgt;16 to 24-year olds live below the poverty linelt;/pgt;  lt;/divgt;  lt;div id="p4" class="row2"gt;  lt;h3gt;35%lt;/h3gt;  lt;pgt;of 16 to 24-year olds have experiencedlt;brgt; domestic violence at homelt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;

1. Вам следует заглянуть в flexbox или сетку, чтобы расположить объекты, и в медиазапросы, чтобы настроить их под разные размеры экрана. В наши дни есть лучшие способы делать вещи!

2. да, это хороший способ, я рекомендую вам изучать в основном flexbox, тем временем я готовлю код для ответа

3. кроме того, что касается чистого прокомментированного кода, в наши дни редко кто делает это

Ответ №1:

 * {  margin: 0;  padding: 0;  box-sizing: border-box; }  header {  font-family: 'Ubuntu'; }  body {  font-family: 'Montserrat';  text-align: left;  padding-top: 122px; }   /* Header */  header {  position: fixed;  width: 100%;  height: 122px;  background: #FFFFFF;  z-index: 1;  text-align: center;  top: 0; }  .wrapper {  max-width: 90%;  margin: 0 auto; }  .logo {  width: 200px;  float: left;  text-align: left;  line-height: 122px; }  nav {  float: right;  line-height: 122px;  width: calc(100% - 200px);  text-align: right; }  nav a {  font-family: 'Ubuntu';  font-weight: 500;  font-size: calc(50px 1vw);  line-height: calc(23px 1vw);  text-decoration: none;  letter-spacing: 4px;  color: #616161;  padding: 20px 20px; }  .links:hover {  background: #F3EA65; }  .CTA {  padding: 15px 50px;  border: none;  background: #F28A31;  border-radius: 15px;  font-family: Ubuntu;  font-style: normal;  font-weight: bold;  line-height: calc(13px 1wv);  font-size: calc(20px 1vw);  color: #FFFFFF;  text-align: center;  letter-spacing: 0.5px;  display: inline-flex; }  .CTA:hover {  background-color: #F3EA65;  color: #FFFFFF;  cursor: pointer; }  main, section {  float: left;  width: 100%; }   /*Our work*/  .ourworksec {  background: #fff;  padding: 100px 25px; }  #ourwork {  width: 100%;  max-width: 620px;  margin: 0 auto;  text-align: center; }   /*Problem section */  h2#theproblem {  padding: 20px; }  #problembackground {  width: 100%;  float: left;  padding: 100px 20px;  background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%); }  #problemcontent {  position: relative; }  .row1 {  position: relative;  display: inline-block;  padding: 20px;  float: left;  width: 50%; }  .row2 {  position: relative;  float: left;  margin-top: 50px;  padding: 20px;  width: 50%; }  @media only screen and (max-width: 1200px) {  .logo {  width: 80px;  }  nav {  width: calc(100% - 80px);  }  nav a {  padding: 15px 10px;  }  .CTA {  padding: 15px 30px;  } }

 lt;headergt;  lt;div class="wrapper"gt;  lt;div class="logo"gt;  lt;a href="...."gt;  lt;img src="Home.png" alt="Logo" width="25%" ;gt;  lt;/agt;  lt;/divgt;  lt;navgt;  lt;a class="links" href="#"gt;aboutlt;/agt;  lt;a class="links" href="#"gt;our teamlt;/agt;  lt;a class="links" href="#"gt;who we helplt;/agt;  lt;a class="links" href="#"gt;get involvedlt;/agt;  lt;a href="#"gt;  lt;button class="CTA"gt;Contactlt;/buttongt;  lt;/agt;  lt;a href="#"gt;  lt;button class="CTA"gt;Donatelt;/buttongt;  lt;/agt;  lt;/navgt;  lt;/divgt; lt;/headergt;  lt;maingt;  lt;section class="ourworksec"gt;  lt;div id="ourwork"gt;  lt;h4gt;OUR WORKlt;/h4gt;lt;brgt;  lt;p id="largertext"gt;  Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,lt;brgt; medium-term accommodation in Brisbane to young people aged from 16-21 years oldlt;brgt; who are homeless or at risk of homelessness.  lt;/pgt;  lt;/divgt;  lt;/sectiongt;   lt;sectiongt;  lt;div id="problembackground"gt;  lt;div id="problemcontent"gt;  lt;h2 id="theproblem"gt;the problemlt;/h2gt;lt;brgt;  lt;div id="p1" class="row1"gt;  lt;h3gt;1 in 5lt;/h3gt;  lt;pgt;young Australians report high levels oflt;brgt; psychological distresslt;/pgt;  lt;/divgt;  lt;div id="p2" class="row1"gt;  lt;h3gt;28 000lt;/h3gt;  lt;pgt;12 to 24-year olds are homeless on any givenlt;brgt; night in Australialt;/pgt;  lt;/divgt;  lt;div id="p3" class="row2"gt;  lt;h3gt;1 in 6lt;/h3gt;  lt;pgt;16 to 24-year olds live below the poverty linelt;/pgt;  lt;/divgt;  lt;div id="p4" class="row2"gt;  lt;h3gt;35%lt;/h3gt;  lt;pgt;of 16 to 24-year olds have experiencedlt;brgt; domestic violence at homelt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/sectiongt; lt;/maingt;

Ответ №2:

Что касается этого, у вас просто недостаточно места при определенной ширине окна, чтобы отобразить их все, поэтому вам нужно адаптировать их размеры. @media запросы определенной ширины-это один из вариантов.
«Наша работа» — это absolute лирика position , которая путается с такими вещами, как margin: 0 auto центрирование вещей. В общем, вы используете position: absolute слишком часто. Честно говоря, вы могли бы избежать всего этого вместе, просматривая свою страницу до сих пор. position: absolute с этим тоже тяжело работать, когда вы возвращаетесь к своему проекту на более позднем этапе.
Здесь ваша проблема в том, что третий элемент все еще находится на той же строке, потому что вы установили display: inline-block . Вы можете обернуть обе строки друг в друга div (что display: block по умолчанию). Также работайте margin-bottom здесь, на мой взгляд. Вы усложняете задачу тем, как используете несколько position свойств.

Ответ №3:

Здесь: Я удалил поплавки и использовал flexbox и сетку Краткое примечание: Этот веб-сайт не реагирует, поэтому, пожалуйста, откройте его в полном окне, а не в мини-окне. Если вам нужен отзывчивый сайт, черт возьми, это большой код запроса:

 lt;bodygt;  lt;stylegt;  *{  margin:0;  padding:0; }  header{  font-family:'Ubuntu';   }  body{  font-family: 'Montserrat';  text-align: left; }   /* Header */  header{  position: fixed;  width:100%;  height:122px;  background:#ffffff;  z-index:1;   }  .wrapper{ width:90%; margin:0 auto; display: flex; justify-content: center; align-items: center; }   .logo{   text-align:left; line-height: 100px; height: fit-content; display: inline-block; width: fit-content; padding: 30px; margin: 0px;  }   .logo image {   width: 200px;  height: 200px;   }   .wrapper a{ font-family:'Ubuntu'; font-weight: 500; font-size:calc(50px 1vw); line-height: calc(23px 1vw); text-decoration: none; letter-spacing: 4px; color:#616161; padding: 20px 20px;  }  .links:hover {  background:#F3EA65; }  .CTA{ padding: 15px 100px; border: none; background: #F28A31 ; border-radius: 15px ; font-family: Ubuntu; font-style: normal; font-weight: bold; line-height: calc(13px 1wv); font-size: calc(20px 1vw); color: #FFFFFF; text-align: center; letter-spacing: 0.5px; display: inline-flex; }  .CTA:hover {  background-color: #F3EA65;  color: #FFFFFF;  cursor: pointer; }   /*Our work*/  #ourwork{ background:#fff; position:absolute; width: 932px; height: 92px; top: 700px; left: 300px; padding:10px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #work{ display: flex; justify-content: center; align-items: center ; }  /*Problem section */  #problembackground{ position: absolute; width: 100%; height: 561px; top:852px; background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);  }  #problemcontent{ position: relative; top: 25%; left:5%; } #the-problem{  margin: auto; width: 300px; }  .row1{ position: relative; display: inline-block; padding-right:10%; margin: auto;  }  .row2{ position: relative; display: inline-block; top:10%; margin: auto; } .problem{  display: grid;  grid-template-columns: 1fr 1fr;  grid-template-rows: 1fr 1fr;   }  li{  list-style: none; }   lt;/stylegt;  lt;headergt;  lt;ul class="wrapper"gt;  lt;div class="logo"gt;  lt;a href="...."gt;  lt;img src="/logo.png" alt="Logo" width="25%";gt;  lt;/agt;  lt;/divgt;    lt;ligt; lt;a class="links" href="#"gt;aboutlt;/agt; lt;/ligt;  lt;ligt; lt;a class="links" href="#"gt;our teamlt;/agt; lt;/ligt;  lt;ligt; lt;a class="links" href="#"gt;who we helplt;/agt; lt;/ligt;  lt;ligt; lt;a class="links" href="#"gt;get involvedlt;/agt; lt;/ligt;  lt;button class="CTA"gt;Contactlt;/buttongt;  lt;/agt;  lt;a href="#"gt;  lt;button class="CTA"gt;Donatelt;/buttongt;  lt;/agt;      lt;/ulgt;  lt;/headergt;    lt;maingt;   lt;section id="work"gt;  lt;div id="ourwork"gt;  lt;h4gt;OUR WORKlt;/h4gt;lt;brgt;  lt;p id="largertext"gt;  Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,lt;brgt; medium-term accommodation in Brisbane to young people aged from 16-21 years oldlt;brgt; who are homeless or at risk of homelessness.   lt;/pgt;  lt;/divgt;  lt;/sectiongt;    lt;sectiongt;  lt;div id="problembackground"gt;  lt;div id="problemcontent"gt;  lt;h2 id="the-problem"gt;the problemlt;/h2gt;lt;brgt;  lt;div class="problem"gt;  lt;div id="p1" class="row1"gt;  lt;h3gt;1 in 5lt;/h3gt;  lt;pgt;young Australians report high levels oflt;brgt; psychological distresslt;/pgt;  lt;/divgt;  lt;div id="p2" class="row1"gt;  lt;h3gt;28 000lt;/h3gt;  lt;pgt;12 to 24-year olds are homeless on any givenlt;brgt; night in Australialt;/pgt;  lt;/divgt;  lt;div id="p3" class="row2"gt;  lt;h3gt;1 in 6lt;/h3gt;  lt;pgt;16 to 24-year olds live below the poverty linelt;/pgt;  lt;/divgt;  lt;div id="p4" class="row2"gt;  lt;h3gt;35%lt;/h3gt;  lt;pgt;of 16 to 24-year olds have experiencedlt;brgt; domestic violence at homelt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;