• Дата реєстрації: 08.01.2017
  • Повідомлень: 4
    • Репутація: 2

Тема: Як вирівняти по довжині 2 діви (їх background)?

Порадьте, будь-ласка, як вирівняти по довжині 2 діви (їх background) з різною кількістю тексту в 2-х різних ячейках 1 рядка таблиці.
Цей код працює чудово у Хромі, недосконало - в ЕІ. Але Firefox вимагає задати конкретну висоту ячейки, а вона невідома через різну кількість тексту. Ось код:

<table>
    <tr>
       <td id="j1"> <div class="inner"> Текст 4 рядки  </div>
       </td>
       <td id="j2"><div class="inner">    Текст 10 рядків    </div>
     
       </td>     
    </tr>
    <tr>
       <td id="j1">    <div class="inner">    Текст 16 рядків </div>
       </td>
       <td id="j2"><div class="inner">    Текст 26 рядків </div>   
       </td>             
    </tr>
    <tr>
       <td id="j1"><div class="inner">        Текст 45 рядків </div>
       </td>
       <td id="j2"><div class="inner">        Текст 5 рядків     </div>
       </td>                               
    </tr>     <!-- і так далі... -->     
    </table>

td     {height:1px;       
    }
.inner { height: 100%;   
    }

2 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти по довжині 2 діви (їх background)?

Трохи не зрозумів Вашого питання. Якщо Вам треба, щоб div-и були однакової ширини - просто задайте їм цю ширину.

Подякували: 221VOLT1

3 Відповідь від Стокротка

  • Дата реєстрації: 08.01.2017
  • Повідомлень: 4
    • Репутація: 2

Re: Як вирівняти по довжині 2 діви (їх background)?

мене висота, height, цікавить. Дякую за відповідь.

4 Відповідь від 221VOLT

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: Як вирівняти по довжині 2 діви (їх background)?

1) більше нових одинакових тем богу нових одинакових тем ( http://replace.org.ua/topic/7571/ така ж тема )
2) навіщо вам таблиці в 2017 році? придивіться до flexbox

Подякували: Monolith1

221VOLT вебсайт

5 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти по довжині 2 діви (їх background)?

221VOLT написав:

1) більше нових одинакових тем богу нових одинакових тем ( http://replace.org.ua/topic/7571/ така ж тема )

Дві теми - більше охоплення аудиторії!

Подякували: 221VOLT1

6 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти по довжині 2 діви (їх background)?

Стокротка написав:

мене висота, height, цікавить. Дякую за відповідь.

Ви напишіть детальніше, якого результату Ви чекаєте. Якщо Вам треба, щоб блоки були конкретної ширини/висоти - задайте їм ці властивості за допомогою CSS.

Чи Вам треба, щоб вони динамічно змінювали свій розмір, але при цьому між собою були рівні. Тоді обгортайте їх у ще один div та задавайте йому там вже яку треба ширину. Для висоти, я думаю треба буде використовувати JavaScript. Але можливо я просто не до кінця зрозумів, що Ви хочете і заведу зараз Вас кудись не туди зовсім.

Подякували: 221VOLT1

7 Відповідь від ping Востаннє редагувалося ping (09.01.2017 08:49:31)

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: Як вирівняти по довжині 2 діви (їх background)?

можна підглянути - як це зробили автори CSS фреймворків .
наприклад - UIkit CSS
дивіться розділ
Match column heights  на сторінці https://getuikit.com/docs/grid.html
and with Flexbox - https://getuikit.com/docs/flex.html

Подякували: 221VOLT1

8 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Як вирівняти по довжині 2 діви (їх background)?

Можливо це допоможе: http://htmlbook.ru/blog/4-metoda-sozdan … voy-vysoty

Подякували: 221VOLT1

9 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Як вирівняти по довжині 2 діви (їх background)?

якщо правильно зрозумів....
https://jsfiddle.net/rys27xy1/1/

але!
1. ID маэ бути уныкальним і одним на сторінці!
2. таблиці тільки для таблиці, забудьте табличну верстку!
3. в даному випадку дівка і так займе w100%,h100%

Подякували: 221VOLT1

10 Відповідь від Стокротка

  • Дата реєстрації: 08.01.2017
  • Повідомлень: 4
    • Репутація: 2

Re: Як вирівняти по довжині 2 діви (їх background)?

Щиро дякую, друзі, за надіслані відповіді!

Я ще працюю над розв*язком питання і ділюся із вами станом речей на сьогодні.

http://htmlbook.ru/blog/4-metoda-sozdan … voy-vysoty:
із цього матеріалу зрозуміла, що в CSS, якщо хочеш 2-3 div-и робити з border-radius однакової висоти, яка залежить від кількості тексту, є річ неможлива.
Можна ще в різних рядках таблиці через клас задати приблизну висоту, що відповідає "найвищому" тексту. Досконалішим є код JavaScript, в якому треба прописати, що  висота кожної ячейки є рівною висоті (х, вона має вичислитися) найбільшої з них (що в таблиці є очевидним, але для браузера  Firefox - ні).
Бо якщо є задана висота  <td>, н (td     {height:250px;       
    }), то працює і в  Firefox-і, але проблема, що та висота у кожному рядку таблиці <tr> є різною і рядків багато.

overflow hidden для батьківського елементу не допомагає.


Повторюю, код працює чудово у Хромі, недосконало - в ЕІ, тобто
td     {height:1px;  /*текст розтягує <td> потім*/     
    }
.inner { height: 100%;
border-radius:25рх;   /*дів заповнює всю висоту комірки*/. 
    }
Але не в  Firefox-і.

Подякували: Monolith, 221VOLT2