4 карточки в квадрате.

[ShadowQ]

Всем привет. Подскажите, как 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]

Да вроде ничего, красиво.

<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]

Есть контейнер cards размером 1440*1427. Внутри этого контейнера нужно расположить 4 карточки размером 707(квадрат.

Вот вопрос, как расположить это все так, чтобы выглядело как на скрине.  Помощь нужна по css.

Изменено 5 апреля, 2023 пользователем ShadowQ

[Zero108]

Так вам чтобы точно или чтобы адаптивно?

[ShadowQ]

14 минут назад, Zero108 сказал:

Так вам чтобы точно или чтобы адаптивно?

пока просто расположить это все так

[Zero108]

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

[ShadowQ]

Решил это 

display: flex; 

flex-wrap: wrap;

спасибо

[AHristich]

а чем не устраивает 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'>

 

[Zero108]

2 часа назад, AHristich сказал:

<div class='ipsGrid ipsGrid_collapsePhone'> // на телефонах
<div class='ipsGrid ipsGrid_collapseTablet'>  // на планшетах

Одновременно нельзя класс сделать одной строкой, чтобы адаптивность были и на смартфонах, и на планшетах?

[AHristich]

6 минут назад, Zero108 сказал:

Одновременно нельзя класс сделать одной строкой, чтобы адаптивность были и на смартфонах, и на планшетах?

Можно. Код с адаптивностью и одинаковой высотой блоков будет такой:

<div class='ipsGrid ipsGrid_collapsePhone ipsGrid ipsGrid_collapseTablet' data-ipsGrid data-ipsGrid-equalHeights='row'>

 

Но для адаптивности на смартфонах и планшетах хватает и ipsGrid_collapsePhone

[Zero108]

AHristich Я два столбика сделал. В первом картинка. Во втором текст несколько строк. При изменении ширины экрана текст налазиет на картинку. Код такой:

<div class='ipsGrid' ipsGrid_collapsePhone>
    <div class='ipsGrid_span3'><img src="#"></div>
    <div class='ipsGrid_span3'>Текст</div>
</div>

Как сделать, чтобы текст не налазил, не пересекал границы картинки? 

 

Изменено 6 апреля, 2023 пользователем Zero108

[AHristich]

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 - занимает оставшееся пространство;

 

[AHristich]

и здесь ошибочка (если не очепятка)

<div class='ipsGrid' ipsGrid_collapsePhone> кавычечка не там.

надо

<div class='ipsGrid ipsGrid_collapsePhone'>

[Zero108]

AHristich Я быстро набирал код тут, естественно, кавычки не было в коде.

Вопрос открыт.

[AHristich]

Zero108 хотя,если честно,зная что держишь сайт ,шаришь в сервере и т.д, промелькнула мысля что троллингуешь 😬 🤔 😀

Только что, Zero108 сказал:

Вопрос открыт.

покажи весь код

[Zero108]

AHristich Я попробовал с картинкой, забил на картинку, оставил только текст. Я раньше с помощью таблицы все это делал за 5 минут, а теперь таблицы стали не по феншую, теперь везде дивы. Попробую твой последний код.

[AHristich]

Zero108  вот пример с последним кодом (статьи тестовые из rss-импорта)

 

Москвич задохнулся после того как узнал сколько баба дала мужикам в порнушке 😀

Изменено 6 апреля, 2023 пользователем AHristich

[AHristich]

еще вот такой вариант прорабатываю

[Zero108]

AHristich как-то не очень получилось, на мой взгляд: https://a108.net/donate/

Где ошибка, почему текст не на всю ширину?

[AHristich]

Zero108 

а еще лучше оставь только

      <div class='ipsColumns ipsColumns_collapsePhone'>
	     <div class='ipsColumn ipsColumn_veryWide'><img class='ipsImage' src="#"></div>
	     <div class='ipsColumn ipsColumn_fluid'>Текст</div>
    </div>
    

 

[Zero108]

AHristich Спасибо, теперь нормально!