LyalinDV 13 Posted March 3, 2016 Report Share Posted March 3, 2016 Добрый день! Пытаюсь адаптировать свои таблицы, но столкнулся с проблемой. Есть таблица: <div style="width: 100%;"> <div style="width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div> </div> При уменьшении экрана Ячейка2 смещается под первую, но при этом обе ячейки расположены слева. Мне необходимо, чтобы при уменьшении экрана Ячейка2 располагалась под первой, но при этом обе ячейки были выровнены по центру. Подскажите как это реализовать? Если вместо left делать такой код: <div style="width: 100%;"> <div style="width: 50%; float: centr; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="width: 50%; float: centr; border: 0px solid black; text-align: center;">Ячейка2</div> </div> Они изначально и без уменьшения экрана расположены друг под другом. Quote Link to post Share on other sites
dee0xeed 36 Posted March 3, 2016 Report Share Posted March 3, 2016 Можно при определенном размере экрана менять стили. Например, если экран будет менее 400 пикселей, то внутренние блоки выравниваются по центру: <div class="block1"> <div class="block2">Ячейка1</div> <div class="block2">Ячейка2</div> </div> css: .block1 { width: 100%; } .block2 { width: 50%; float: left; border: 0px solid black; text-align: center; } @media (max-width: 400px) { .block2 { float: none; margin: 0 auto;} } stay_strong 1 Quote Link to post Share on other sites
tvskit 259 Posted March 3, 2016 Report Share Posted March 3, 2016 <title>проба</title> <style> .body { min-width: 666px; max-width: 6666px; text-align: center; } .div1 { min-width: 330px; /* если меньше 330 то ....., если max-width: больше то ... и т.д. */ width: 50%; float: left; border: 0px solid black; text-align: center; } .div2 { min-width: 330px; (добавил) width: 50%; float: left; border: 0px solid black; text-align: center; } </style> </head> <body> <div style="width: 100%;"> <div class="div1">Ячейка1</div> <div class="div2">Ячейка2</div> </div> Как то так ПС. Простите, чёт я немного перестарался. Вот так <div style="width: 100%;"> <div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div> </div> Ключевое слово min-width: 330px; Quote Link to post Share on other sites
LyalinDV 13 Posted March 3, 2016 Author Report Share Posted March 3, 2016 Что-то не получается.... Сейчас таблица выглядит так: <div style="width: 100%;"> <div style="float: centr; width: 100%;"> <div style="float: left; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="float: left; border: 0px solid black; text-align: center;">Ячейка2</div> <div style="float: left; border: 0px solid black; text-align: center;">Ячейка3</div> <div style="float: left; border: 0px solid black; text-align: center;">Ячейка4</div> <div style="float: left; border: 0px solid black; text-align: center;">Ячейка5</div> </div> </div> Надо эту таблицу выравнять по центру. Через код <div style="width: 100%;"> <div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="min-width: 330px; width: 50%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div> </div> таблица просто на два столбца выравнивается и не по центру Quote Link to post Share on other sites
LyalinDV 13 Posted March 3, 2016 Author Report Share Posted March 3, 2016 Вот пример: http://mirkosmosa.ru/lunar-calendar/haircut/2016 Quote Link to post Share on other sites
Administrators DevilStar 1169 Posted March 3, 2016 Administrators Report Share Posted March 3, 2016 <div style=" width: 100%;text-align: center;position: relative;display: flex;"> <div style="/* float: left; */border: 0px solid black; text-align: center;width: 20%;">Ячейка1</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка2</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка3</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка4</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка5</div> </div> Quote Link to post Share on other sites
tvskit 259 Posted March 3, 2016 Report Share Posted March 3, 2016 <div style="width: 100%;"> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка3</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка4</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка5</div> </div> Может так? Я не понимаю вас, почему не знаю. Что вы хотите? Quote Link to post Share on other sites
LyalinDV 13 Posted March 3, 2016 Author Report Share Posted March 3, 2016 <div style=" width: 100%;text-align: center;position: relative;display: flex;"> <div style="/* float: left; */border: 0px solid black; text-align: center;width: 20%;">Ячейка1</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка2</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка3</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка4</div> <div style="/* float: left; */ border: 0px solid black; text-align: center;width: 20%;">Ячейка5</div> </div> Таблица теперь выравнивается по центру, но при уменьшении сжимается содержимое и то, что внутри становится не читаемым. Необходимо, чтобы ячейки не сжимались, а просто смещались вниз. Ссылку на пример я дал Quote Link to post Share on other sites
LyalinDV 13 Posted March 3, 2016 Author Report Share Posted March 3, 2016 <div style="width: 100%;"> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка1</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка2</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка3</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка4</div> <div style="min-width: 222px; width: 20%; float: left; border: 0px solid black; text-align: center;">Ячейка5</div> </div> Может так? Я не понимаю вас, почему не знаю. Что вы хотите? Я ссылку с примером чуть выше предоставил. Там таблица из 3х4, мне необходимо такую же, по такому же принципу Quote Link to post Share on other sites
tvskit 259 Posted March 3, 2016 Report Share Posted March 3, 2016 Я ссылку с примером чуть выше предоставил. Там таблица из 3х4, мне необходимо такую же, по такому же принципу ССылку не заметил <title>проба</title> <style> .talbtrabl { display: inline-block; padding: 5px; margin: 5px; width: 100%; text-align: center; border: #c5c6c6 1px solid; vertical-align: top; } .div1 { display: inline-block; padding: 5px; margin: 5px; width: 230px; text-align: center; border: #c5c6c6 1px solid; vertical-align: top; } </style> </head> <body> <div class="talbtrabl"> <div class="div1">Ячейка1</div> <div class="div1">Ячейка2</div> <div class="div1">Ячейка3</div> <div class="div1">Ячейка4</div> <div class="div1">Ячейка5</div> <div class="div1">Ячейка6</div> <div class="div1">Ячейка7</div> <div class="div1">Ячейка8</div> <div class="div1">Ячейка9</div> <div class="div1">Ячейка10</div> <div class="div1">Ячейка11</div> <div class="div1">Ячейка12</div> </div> </body> </html> НУ а что не получалось то? Всё то же самое, только 5 ячеек. Quote Link to post Share on other sites
LyalinDV 13 Posted March 3, 2016 Author Report Share Posted March 3, 2016 Проблема решилась так, может кому надо: <div style="display: block; text-align: center"> <div style="width: 200px; display: inline-block">Ячейка1</div> <div style="width: 200px; display: inline-block">Ячейка2</div> </div> Quote Link to post Share on other sites
tvskit 259 Posted March 3, 2016 Report Share Posted March 3, 2016 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>проба</title> <style> .talbtrabl { display: inline-block; padding: 5px; margin: 5px; width: 100%; text-align: center; border: #c5c6c6 1px solid; vertical-align: top; } .div1 { display: inline-block; padding: 5px; margin: 5px; width: 230px; text-align: center; border: #c5c6c6 1px solid; vertical-align: top; } .img { max-width: 100%; height: auto; } </style> </head> <body> <div class="talbtrabl"> <div class="div1">Ячейка1 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/0.jpg"></img></div> <div class="div1">Ячейка2 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/1.jpg"></img></div> <div class="div1">Ячейка3 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/2.jpg"></img></div> <div class="div1">Ячейка4 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/3.jpg"></img></div> <div class="div1">Ячейка5 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/4.jpg"></img></div> <div class="div1">Ячейка6 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/5.jpg"></img></div> <div class="div1">Ячейка7 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/6.jpg"></img></div> <div class="div1">Ячейка8 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/7.jpg"></img></div> <div class="div1">Ячейка9 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/8.jpg"></img></div> <div class="div1">Ячейка10 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/9.jpg"></img></div> <div class="div1">Ячейка11 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/10.jpg"></img></div> <div class="div1">Ячейка12 <img src="http://mirkosmosa.ru/sites/default/files/moon_phases/month/haircut/11.jpg"></img></div> </div> </body> </html> Круче чем оригинал Quote Link to post Share on other sites
Administrators DevilStar 1169 Posted March 3, 2016 Administrators Report Share Posted March 3, 2016 http://codepen.io/Simushkin/pen/mPJjGY- на коленке, адаптивные блоки с использованием flexbox. Изначально по 3 в ряд, с 800px - 2 в ряд, с 600px - 1 в ряд. Quote Link to post Share on other sites
LyalinDV 13 Posted March 3, 2016 Author Report Share Posted March 3, 2016 А может есть способ выравнять содержимое ячейки по вертикали? Quote Link to post Share on other sites
Administrators DevilStar 1169 Posted March 3, 2016 Administrators Report Share Posted March 3, 2016 А может есть способ выравнять содержимое ячейки по вертикали? Обновил пример - http://codepen.io/Simushkin/pen/mPJjGY Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.