Насколько правильно указан этот код (относительно к width)?
правильно ли указан код. внизу результат этого кода, а сверху как он должен выглядит. мне кажется такой способ усложняет показ страницы. пхж слишком затруднил. может есть простой код который выдасть такой же результат. а еще насколько правильно указать длину процентом
<div class="review-container"> <div class="gorizontal-box"></div> <div class="text-review"> <p style="font-size: 16px">Guest Reviews</p> <p style="font-size: 16px">"AENEAN SOLLICITUDIN, LOREM QUIS BIBENDUM AUCTOR, NISI ELIT CONSEQUAT IPSUM, NEC SAGITTIS SEM NIBH ID ELIT. DUIS SED ODIO SIT AMET NIBH VULPUTATE CURSUS A SIT AMET MAURIS. MORBI ACCUMSAN IPSUM</p> <p style="font-size: 16px">Lesley Greenman, Australia</p> </div> <div class="vertical-box"></div> </div> |
<div class="review-container"> <div class="gorizontal-box"></div> <div class="text-review"> <p style="font-size: 16px">Guest Reviews</p> <p style="font-size: 16px">"AENEAN SOLLICITUDIN, LOREM QUIS BIBENDUM AUCTOR, NISI ELIT CONSEQUAT IPSUM, NEC SAGITTIS SEM NIBH ID ELIT. DUIS SED ODIO SIT AMET NIBH VULPUTATE CURSUS A SIT AMET MAURIS. MORBI ACCUMSAN IPSUM</p> <p style="font-size: 16px">Lesley Greenman, Australia</p> </div> <div class="vertical-box"></div> </div>
.review-container { width: 100%; height: 500px; margin-top: 40px; background-color: aqua; display: flex; /* Используем flexbox для выравнивания дочерних элементов */ position: relative; /* Добавим позиционирование для корректного расположения внутренних элементов */ } .text-review { height: 100%; width: 30%; background-color: yellow; overflow: hidden; padding: 20px 50px; box-sizing: border-box; } .gorizontal-box { height: 100%; width: 50%; background-color: red; background-image: url('../assets/picone.jpg'); background-size: cover; } .vertical-box { height: 100%; width: 20%; background-color: chartreuse; background-image: url('../assets/pictwo1.jpg'); background-size: cover; } @media (max-width: 768px) { .text-review, .gorizontal-box, .vertical-box { width: 100%; } } |
.review-container { width: 100%; height: 500px; margin-top: 40px; background-color: aqua; display: flex; /* Используем flexbox для выравнивания дочерних элементов */ position: relative; /* Добавим позиционирование для корректного расположения внутренних элементов */ } .text-review { height: 100%; width: 30%; background-color: yellow; overflow: hidden; padding: 20px 50px; box-sizing: border-box; } .gorizontal-box { height: 100%; width: 50%; background-color: red; background-image: url('../assets/picone.jpg'); background-size: cover; } .vertical-box { height: 100%; width: 20%; background-color: chartreuse; background-image: url('../assets/pictwo1.jpg'); background-size: cover; } @media (max-width: 768px) { .text-review, .gorizontal-box, .vertical-box { width: 100%; } }
Дополнительно:
Вопрос-то сформулируйте.
spoiler
Там видно деление на шесть равных частей и соответственно распределение на три, две и одну шестую. В процентах:
3/6 = 50%
2/6 = 33,33333%
1/6 = 16,66666%
Ну а так в целом, верстка норм.
Во-первых, нужен класс для p вместо <p style="font-size: 16px">
Во-вторых, если
внизу результат, а сверху как должно быть
то очевидно, что картинка справа шире, чем должна быть.
В-третьих,
насколько правильно указать ширину(width) процентом
вполне обычная практика
В-четверых,
часть текста невидно в мобильной версии
@media запросы или значения типа font-size: max(30vw, 30px) в помощь
- да с картинкой у меня больше проблем что ты посоветуешь
- newfolder_js, указать ей width и object-fit
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для правильного указания ширины кода в HTML можно использовать различные способы. Один из них - это использование атрибута style с CSS свойством width.
Например, если у вас есть блок с кодом на PHP, вы можете указать ширину этого блока следующим образом:
<div style="width: 500px"> </div>
В данном примере, блок с кодом PHP будет иметь ширину 500px. Вы можете изменить это значение в соответствии с вашими потребностями.
Также, можно использовать внешние таблицы стилей (CSS) для указания ширины кода. Например:
.code-block { width: 80%; margin: 0 auto; /* Центрирование блока кода */ } <div class="code-block"> </div>
В этом случае, блок кода будет иметь ширину 80% от ширины родительского элемента и будет автоматически центрироваться на странице.
Важно помнить, что указание ширины кода в HTML зависит от дизайна и структуры вашего сайта, поэтому рекомендуется тестировать различные варианты и выбирать наиболее подходящий для вашего проекта.