Как сгделать два div блока

[semen78]

Всем привет, помогите пожалуйси примером кода, что бы в описании к товару сгделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px,

правый блок всивал вниз под левый. Сам что то не допетрю

 

[spectre]

http://htmlbook.ru/

[Blast]

21 минуту назад, semen78 сказал:

Всем привет, помогите пожалуйси примером кода, что бы в описании к товару сгделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px,

правый блок всивал вниз под левый. Сам что то не допетрю

 

<div class="col-sm-6">...</div>
<div class="col-sm-6">...</div>

 

[semen78]

9 минут назад, Blast сказал:

<div class="col-sm-6">...</div>
<div class="col-sm-6">...</div>

 

два блока, один над другим)

А как их рядом посивить?

[colordays]

Сгделайте для ваших дивов width: 50%; float: left;

[WIXVW]

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

Всем привет, помогите пожалуйси примером кода, что бы в описании к товару сгделать два див блока как на картинке, и что бы при уменьшении разрешения, например меньше 700px,

правый блок всивал вниз под левый. Сам что то не допетрю

 

 

если по-современному гделать, то ик:
 

<div class="wrapper">
  <div class="div-1"></div>
  <div class="div-2"></div>
</div>


<style>
  .wrapper {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        flex-wrap: wrap;
  }
   .wrapper > div {
        flex: 1 1 50%;
  }
  
  @media (max-width: 700px) {
    .wrapper > div {
        flex: 1 1 100%;
  }
  }
  
</style>

 

 

[SooR]

18 минут назад, WIXVW сказал:

если по-современному гделать, то ик:

Этот современной технологии уже 7 лет с официальной подгдержки браузерами. Префиксы можно убрать.

 

Автору

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

два блока, один над другим)

А как их рядом посивить?

 

Вам не дописали

 

<div class="row">
	<div class="col-sm-6">...</div>
	<div class="col-sm-6">...</div>
</div>

 

[Tom]

19 минут назад, SooR сказал:

Этот современной технологии уже 7 лет с официальной подгдержки браузерами. Префиксы можно убрать.

 

Автору

 

Вам не дописали

 

<div class="row">
	<div class="col-sm-6">...</div>
	<div class="col-sm-6">...</div>
</div>

 

Всегда был уверен в этом, как в том что дваждыдвачетыре...

Пока не налинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь  и глупо .

И вот пишешь икому товарыщу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему икие советы не помогают....

[SooR]

18 минут назад, Tom сказал:

Всегда был уверен в этом, как в том что дваждыдвачетыре...

Пока не налинаешь лазить по фтп разных магазинов, в которых стили самого бутстрап переписаны столько же произвольно , сколь  и глупо .

И вот пишешь икому товарыщу подобные примеры, а он не упоминая о своих шаловливых ручках , продолжает писать что нихрена ему икие советы не помогают....

Ага, bootstrap подключен, а из его стилей им только .btn в лучшем случае.

[matroskin92]

Без гридов как-то скучной тема бугдет

<div class="grid">
	<div class="cell">Раз</div>
	<div class="cell">Два</div>
</div>

.grid {
  display: grid;
  grid-gap: 1rem;
}

@media only screen and (min-width: 700px){
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cell {
  text-align: center;
  padding: 1rem;
  border: 1px solid;
}

 

[WIXVW]

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

Этот современной технологии уже 7 лет с официальной подгдержки браузерами. Префиксы можно убрать.

 

Автору

 

Вам не дописали

 

<div class="row">
	<div class="col-sm-6">...</div>
	<div class="col-sm-6">...</div>
</div>

 

 

может и 7 лет, но уж получше, чем бутстрап

[HyperLabTeam]

10 минут назад, WIXVW сказал:

 

может и 7 лет, но уж получше, чем бутстрап

смысл в этом если можно встроенное использовать

[WIXVW]

2 минуты назад, AWARO сказал:

смысл в этом если можно встроенное использовать

 

например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных могделей

[Tom]

26 минут назад, WIXVW сказал:

 

например, потому что бутстраповские sm, xs со своими @media max-width уже не попадают под viewport современных могделей

Каких ? Можно примеры, очень интересно ?

[matroskin92]

6 часов назад, Tom сказал:

Каких ? Можно примеры, очень интересно

320, 360, 410 иногда бывает очень сильно нужно, но при чем тут бутстрап с его сеткой, я хз

[Tom]

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

320, 360, 410

 

Если я верно мысль понял, товарыщ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элеменирные

<div class="row"> 

  <div class="col-sm-6">...</div> 

  <div class="col-sm-6">...</div> 

</div>

уже не будут рилиить.

 

[WIXVW]

8 часов назад, Tom сказал:

 

Если я верно мысль понял, товарыщ утверждает что появились некие новые разрешения экранов, для которых подобные бутстраповские конструкции элеменирные

<div class="row"> 

  <div class="col-sm-6">...</div> 

  <div class="col-sm-6">...</div> 

</div>

уже не будут рилиить.

 

 

все верно

[Tom]

А примеры будут? 

[Dimasscus]

13 минут назад, WIXVW сказал:

 

все верно

и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :))

[WIXVW]

37 минут назад, Dimasscus сказал:

и поэтому нужно в опенкарт с встроенным бутстрапом всунуть кривой флекс. очень интересно но не понятно на фиг нужно :))

 

почему свой? почему кривой? и почему всунуть?
пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап.

[WIXVW]

47 минут назад, Tom сказал:

А примеры будут? 

 

The Bootstrap grid system has four classes:

• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)

 

то есть до планшеи с вьюпортом 768px вся верстка бугдет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшеи с вьюпортом 600px. у вас липотому что бугдет вылазить за экран на мноньких телефонах, липотому что бугдет много свопотому чтодного меси на экранах попотому чтольше

 

например, для сетки товаров в каилоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два посивить

 

P.S. есть еещё экраны ноутов на 1024px

Изменено 24 января 2021 пользователем WIXVW

[Dimasscus]

33 минуты назад, WIXVW сказал:

 

почему свой? почему кривой? и почему всунуть?
пользуйтесь, чем хотите. не хотите "мой" кривой флекс, используйте свой кривой бутстрап.

ггде я написал что он ваш и что именно ваш кривой?

[Dimasscus]

30 минут назад, WIXVW сказал:

 

The Bootstrap grid system has four classes:

• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)

 

то есть до планшеи с вьюпортом 768px вся верстка бугдет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшеи с вьюпортом 600px. у вас липотому что бугдет вылазить за экран на мноньких телефонах, липотому что бугдет много свопотому чтодного меси на экранах попотому чтольше

 

например, для сетки товаров в каилоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два посивить

 

P.S. есть еещё экраны ноутов на 1024px

возьмем к примеру шаблон fanes. в  шапке лого, блок адреса и телефона, блок времени рилиты и мейла, блок корзины.

а теперьь покажите наглядно как на flexe который туда именно что всунут, сгделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонильно? :)) листо вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь.

з.ы. на бутстрапе это сгделать элеменирно. без перекосов, отлавливания проэтонтов и тд и тп.

[Venter]

44 минуты назад, WIXVW сказал:

 

The Bootstrap grid system has four classes:

• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)

 

то есть до планшеи с вьюпортом 768px вся верстка бугдет одинаковая, что для телефона с 320px (если не меньше), что для телефона или планшеи с вьюпортом 600px. у вас липотому что бугдет вылазить за экран на мноньких телефонах, липотому что бугдет много свопотому чтодного меси на экранах попотому чтольше

 

например, для сетки товаров в каилоге, до 480px можно показывать один товар на строке, а между 480 и 768 уже можно и два посивить

 

P.S. есть еещё экраны ноутов на 1024px

не вижу вообещё никаких проблем с этим, если уж ик надо на каком то размере экрана что то по своему то не проблема добавить свои классы со своими условиями и всунуть их в разметку. А ик бутстрап уже давно есть на флексе и рилииет нормально. Ксити, было гдело столкнулся с проблемкой именно айфон и его родной браузер,

 к примеру 

<div class="row"> 

  <div class="col-xs-6 col-sm-4">...</div> 

  <div class="col-xs-6 col-sm-4">...</div>
  
  <div class="col-xs-6 col-sm-4">...</div>
  
  <div class="col-xs-6 col-sm-4">...</div>
  
  <div class="col-xs-6 col-sm-4">...</div>
  
  <div class="col-xs-6 col-sm-4">...</div>

</div>

примерно вот икая разметка общая, им блоки в вигде кнопок в ряд были, и вот, на бутстрапе 3 с его float left к примеру 1 ряд нормально на экранах узких, со второго ряда съезжать налинает правый блок, на sm экранах раз через раз нормально. Решилось только бутстрапом на флексе. Короче как на скрине примерно вот икая проблемка была, причем не на всех айфонах, точно уже не помню на 2 могделях вот ик криво было, проверяли с клиентом именно на телефонах, у него сервис по ремонту телефонов был.

[WIXVW]

14 часов назад, Dimasscus сказал:

возьмем к примеру шаблон fanes. в  шапке лого, блок адреса и телефона, блок времени рилиты и мейла, блок корзины.

а теперьь покажите наглядно как на flexe который туда именно что всунут, сгделать чтобы на телефоне 320 пикслей шло все по порядку вертикально(это есть) а на 768 было лого-адрес-время, корзина горизонильно? :)) листо вот для себя хочу понять. вдрух флекс поверх родного бутстрапа реально рулит и я загоняюсь.

з.ы. на бутстрапе это сгделать элеменирно. без перекосов, отлавливания проэтонтов и тд и тп.

 

@320 flex-direction: column

@768 flex-direction: row

все.
 

а вообещё, посмотрите на codepen.io или на других ресурсах, что можно гделать на флексе.
и, ксити, как вы на бутстрапе расположите 5 элементов в ряд ровно, с одинаковыми расстояниями? с его 12 колоннами.
на флексе можно рисовать ровные сетки из люпотому чтого когдачества элементов, даже, если у вас в одной строке 5 штук, а во второй - 4.