ShadowQ Опубликовано 5 апреля, 2023 Поделиться Опубликовано 5 апреля, 2023 Всем привет. Подскажите, как 4 элемента внутри этого квадрата? <div class="cards"> <div class="item cards_1">1</div> <div class="item cards_2">2</div> <div class="item cards_3">3</div> <div class="item cards_4">4</div> </div> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 5 апреля, 2023 Поделиться Опубликовано 5 апреля, 2023 Да вроде ничего, красиво. <div class="cards"> <div> <div class="item cards_1">1</div> <div class="item cards_2">2</div> </div><div> <div class="item cards_3">3</div> <div class="item cards_4">4</div> </div></div> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
ShadowQ Опубликовано 5 апреля, 2023 Автор Поделиться Опубликовано 5 апреля, 2023 (изменено) Есть контейнер cards размером 1440*1427. Внутри этого контейнера нужно расположить 4 карточки размером 707(квадрат. Вот вопрос, как расположить это все так, чтобы выглядело как на скрине. Помощь нужна по css. Изменено 5 апреля, 2023 пользователем ShadowQ Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 5 апреля, 2023 Поделиться Опубликовано 5 апреля, 2023 Так вам чтобы точно или чтобы адаптивно? SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
ShadowQ Опубликовано 5 апреля, 2023 Автор Поделиться Опубликовано 5 апреля, 2023 14 минут назад, Zero108 сказал: Так вам чтобы точно или чтобы адаптивно? пока просто расположить это все так Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 5 апреля, 2023 Поделиться Опубликовано 5 апреля, 2023 (изменено) 46 минут назад, ShadowQ сказал: Помощь нужна по css. Добавляйте в каждый div класс ширины и максимальной ширины. Например, для первого div: width:100%; max-width: 1440px; Для второго и пятого div (внутренних): width:100%; max-width: 700px; Для 4 внутренних div (item cards_1 и т.д.): width:100%; padding: 10px; 50 минут назад, Zero108 сказал: <div class="cards"> <div> <div class="item cards_1">1</div> <div class="item cards_2">2</div> </div><div> <div class="item cards_3">3</div> <div class="item cards_4">4</div> </div></div> И, соответственно, картинки должны быть квадратными со стороной 700 px. Изменено 5 апреля, 2023 пользователем Zero108 SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
ShadowQ Опубликовано 5 апреля, 2023 Автор Поделиться Опубликовано 5 апреля, 2023 Решил это display: flex; flex-wrap: wrap; спасибо Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 а чем не устраивает ips-ский вариант сеток? <div class='ipsGrid'> <div class='ipsGrid_span3'>1</div> <div class='ipsGrid_span3'>2</div> <div class='ipsGrid_span3'>3</div> <div class='ipsGrid_span3'>4</div> </div> Для адаптивности <div class='ipsGrid ipsGrid_collapsePhone'> // на телефонах <div class='ipsGrid ipsGrid_collapseTablet'> // на планшетах Чтобы блоки были одинаковой высоты добавьте data-ipsGrid data-ipsGrid-equalHeights='row' в <div class='ipsGrid'> SlawkA и Zero108 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 2 часа назад, AHristich сказал: <div class='ipsGrid ipsGrid_collapsePhone'> // на телефонах <div class='ipsGrid ipsGrid_collapseTablet'> // на планшетах Одновременно нельзя класс сделать одной строкой, чтобы адаптивность были и на смартфонах, и на планшетах? SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 6 минут назад, Zero108 сказал: Одновременно нельзя класс сделать одной строкой, чтобы адаптивность были и на смартфонах, и на планшетах? Можно. Код с адаптивностью и одинаковой высотой блоков будет такой: <div class='ipsGrid ipsGrid_collapsePhone ipsGrid ipsGrid_collapseTablet' data-ipsGrid data-ipsGrid-equalHeights='row'> Но для адаптивности на смартфонах и планшетах хватает и ipsGrid_collapsePhone SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 (изменено) AHristich Я два столбика сделал. В первом картинка. Во втором текст несколько строк. При изменении ширины экрана текст налазиет на картинку. Код такой: <div class='ipsGrid' ipsGrid_collapsePhone> <div class='ipsGrid_span3'><img src="#"></div> <div class='ipsGrid_span3'>Текст</div> </div> Как сделать, чтобы текст не налазил, не пересекал границы картинки? Изменено 6 апреля, 2023 пользователем Zero108 SlawkA 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 43 минуты назад, Zero108 сказал: AHristich Я два столбика сделал. В первом картинка. Во втором текст несколько строк. При изменении ширины экрана текст налазиет на картинку. Код такой: <div class='ipsGrid' ipsGrid_collapsePhone> <div class='ipsGrid_span3'><img src="#"></div> <div class='ipsGrid_span3'>Текст</div> </div> Как сделать, чтобы текст не налазил, не пересекал границы картинки? в вашем случае,мне кажется лучше так <div class='ipsGrid ipsGrid_collapsePhone'> <div class='ipsGrid_span3'> <div class='ipsColumns ipsColumns_collapsePhone'> <div class='ipsColumn ipsColumn_medium'><img class='ipsImage' src="#"></div> <div class='ipsColumn ipsColumn_fluid'>Текст</div> </div> <div class='ipsGrid_span3'>следующий блок</div> </div> Размеры колонок ipsColumn_veryNarrow - 50 пикселей в ширину; ipsColumn_narrow - 120 пикселей в ширину; ipsColumn_medium - 200 пикселей в ширину; ipsColumn_wide - 280 пикселей в ширину; ipsColumn_veryWide - 360 пикселей в ширину; ipsColumn_fluid - занимает оставшееся пространство; Zero108 и SlawkA 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 и здесь ошибочка (если не очепятка) <div class='ipsGrid' ipsGrid_collapsePhone> кавычечка не там. надо <div class='ipsGrid ipsGrid_collapsePhone'> Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 AHristich Я быстро набирал код тут, естественно, кавычки не было в коде. Вопрос открыт. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 Zero108 хотя,если честно,зная что держишь сайт ,шаришь в сервере и т.д, промелькнула мысля что троллингуешь 😬 🤔 😀 Только что, Zero108 сказал: Вопрос открыт. покажи весь код Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 AHristich Я попробовал с картинкой, забил на картинку, оставил только текст. Я раньше с помощью таблицы все это делал за 5 минут, а теперь таблицы стали не по феншую, теперь везде дивы. Попробую твой последний код. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 (изменено) Zero108 вот пример с последним кодом (статьи тестовые из rss-импорта) Москвич задохнулся после того как узнал сколько баба дала мужикам в порнушке 😀 Изменено 6 апреля, 2023 пользователем AHristich Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 еще вот такой вариант прорабатываю Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 AHristich как-то не очень получилось, на мой взгляд: https://a108.net/donate/ Где ошибка, почему текст не на всю ширину? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
AHristich Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 Zero108 а еще лучше оставь только <div class='ipsColumns ipsColumns_collapsePhone'> <div class='ipsColumn ipsColumn_veryWide'><img class='ipsImage' src="#"></div> <div class='ipsColumn ipsColumn_fluid'>Текст</div> </div> Zero108 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Zero108 Опубликовано 6 апреля, 2023 Поделиться Опубликовано 6 апреля, 2023 AHristich Спасибо, теперь нормально! Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.