2

вот код:

#intouch {
  font-family: Arial Rounded MT Bold, bold;
  width: 17%;
  float: left;
  border-right: 2px solid #be0000;
  border-bottom: 2px solid #be0000;
  font-size: 300%;
  color: #be0000;
}

#options {
  background: #be0000;
  font-size: 190%;
  color: #ffffff;
  width: 83%;
  margin-left: 17%;
  padding-top: 1.6%;
}

.option {
  padding-left: 7%;
}
<body>
  <div id="intouch">На связи</div>
  <div id="options">
    <span class="option">Регистрация</span>
    <span class="option">Вход</span>
    <span class="option">Пожертвования</span>
    <span class="option">Контакты</span>
  </div>
</body>

Дело в том что на устройствах с разным разрешением это выводится криво. Как решить этот вопрос без @media?

4
  • Почему решили без медиа запросов (@media)?
    – Kyper
    1 ноя 2018 в 8:12
  • Мы на курсах ещё их не проходили 1 ноя 2018 в 8:14
  • Адаптацию под верстку отлично делают меди запроса и разобраться в них совсем не сложно. Это вам на курсах поставили такую задачу, без @media?
    – Kyper
    1 ноя 2018 в 8:16
  • Используйте проценты, если медиа пока нельзя. Здесь принято выкладывать учебные задачи с попытками решений.
    – kizoso
    1 ноя 2018 в 8:20

2 ответа 2

1

Вариант с flex, точнее flex-flow: row wrap; позволит переносить контент если не будет вмещаться. При этом можно задавать ширину как в процентах (как у Вас) так и фикс, если не вместится на опр. разрешении - блоки будут перестраиваться друг под другом:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.top {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

#intouch {
  font-family: Arial Rounded MT Bold, bold;
  width: 100px;
  float: left;
  border-right: 2px solid #be0000;
  border-bottom: 2px solid #be0000;
  color: #be0000;
  font-size: 20px;
  
  flex-grow:0;
  flex-shrink:0;
}

#options {
  background: #be0000;
  color: #ffffff;
  width: calc(100% - 100px);
  padding-top: 1.6%;
  padding-bottom: 1.6%;
  
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  flex-grow:0;
  flex-shrink:0;
  
  font-size: 14px;
}
<div class="top">
  <div id="intouch">На связи</div>
  <div id="options">
    <span class="option">Регистрация</span>
    <span class="option">Вход</span>
    <span class="option">Пожертвования</span>
    <span class="option">Контакты</span>
  </div>
</div>

Еще если без медиазапросов (@media), то, как вариант, использовать размер шрифта в vw или vh, а то проценты как-то не особо хорошо работают:

* {
  box-sizing: border-box;
}

#intouch {
  font-family: Arial Rounded MT Bold, bold;
  width: 17%;
  float: left;
  border-right: 2px solid #be0000;
  border-bottom: 2px solid #be0000;
  color: #be0000;
  font-size: 4vw;
}

#options {
  background: #be0000;
  color: #ffffff;
  width: 83%;
  margin-left: 17%;
  padding-top: 1.6%;
  
  font-size: 3vw;
}

.option {
  padding-left: 7%;
}
<div id="intouch">На связи</div>
<div id="options">
  <span class="option">Регистрация</span>
  <span class="option">Вход</span>
  <span class="option">Пожертвования</span>
  <span class="option">Контакты</span>
</div>

0

Сделайте внутренние паддинги для #intouch и #options. Если .option { display: inline-block}, то лучше писать .option:not(:last-child){padding-right: 7%} А вообще проценты действительно плохо работают, как сказали выше

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.