Не корректно отображаются элементы

@florida48 · Регистрация: 12.02.2020

Студворк — интернет-сервис помощи студентам

Добрый день только начинаю верстать то есть учусь . Хочу сверстать форму но что то не работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   <section class="info">
            <div class="wrapper">
                        <div class="text">
                            <p>Много много текста</p>
                        </div>
                        <form  name="newform">
                            <div class="block1">
                                    <input type="text">
                                    <input type="text">
                                    <input type="text">
                            </div>
                            <div class="block2">
                                    <input type="text">
                                    <input type="text">
                            </div>
                            <div class="block3">
                                    <input type="text">
                            </div>
                             <div class="block4">
                                    <input type="text">
                            </div>
                        </form>
                  </div>
   </section>

[CSS]
.wrapper{
max-width: 900px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.text{
max-width:42%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}

input{
margin-bottom: 30px;
display: block;
padding: 16px 22px;
max-width: 100%;
margin-left: 10px;
}

.form{
width: 100%;
}
.block1{
display: flex;
flex-wrap: wrap;
}

.block2{
display: flex;
flex-wrap: wrap;
}

У меня несколько вопросов когда делаю форму с инпутами то он занимает не всю остававшеюся ширину то есть не до конца враппера как можно это решить. Еще когда сжимаю до мобильной версии. То там где по три инпута не переходит на отдельные строчки то есть при мобильной версии я хотел что бы все инпуты находились на своей строчке и занимали 100 % ширины экрана то есть врапепера. Ну и еще вопрос при мобильной версии текст занимает max-width:42%; , подскажите а нельзя что бы по контенту я ставил не max-width:42%; а к примеру если у меня инпуты занимают 52% не указывая ширины то текст занимал 100% оставшегося места, и при мобильной версии он тоже растягивался на 100 ширины враппера. Вроде мне кажется сделал все парвильно но неправильно работает (( Может даст кто дельный совет или натолкнет что не так

@florida48 · 12.02.2020, 21:55 **[ТС]**

а вот как в мобилки я хотел видеть

@Panda58dev · 12.02.2020, 22:13

florida48, здравствуй, на счёт формы: в css у тебя указано .form, то есть класс с названием "form", но такого класса нет в html коде, поэтому тебе надо либо убрать точку, и css будет обращаться не к классу "form", а к тегу form, либо прописать вместо ".form" -> "newform". То есть у тебя должно получиться так:

CSS
1
2
3
form{
width: 100%;
}

либо так:

CSS
1
2
3
.newform {
width: 100%;
}

Для мобильных версий страницы сайта обычно пользуются оператором @media о нём можно почитать тут, а также, ты сам можешь воспользоваться гуглом и разобраться в этом получше.

Добавлено через 8 минут
Но для начала, я бы советовал освоить базовый синтаксис html и css, а уже позже начать разбираться, как делать адаптивные страницы

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@florida48 0 / 0 / 0 Регистрация: 12.02.2020 Сообщений: 3
	12.02.2020, 21:55 [ТС]
	а вот как в мобилки я хотел видеть Миниатюры 0