Контролюємо переповнення комірки таблиці за допомогою max-width

  
 
Припустимо, ми хочемо зробити двоколонковому розкладку за допомогою властивості table-cell. Ліва колонка буде займати всю доступну ширину, права ж може мати два варіанти в нашому випадку:
 
 
     
  • ми задамо цій колонці фіксовану ширину;
  •  
  • вона дорівнюватиме мінімальній ширині контенту → minimum content width (MCW) .
  •  
 
У способу верстки на колонках є один істотний мінус → якщо вміст всередині блоку виходить за його рамки то обмеження задане через width на нього діяти не буде, тому що MCW в даному випадку більше. Якщо ж ми хочемо розтягнути ліву колонку по всій ширині то нам доведеться задати її ширину рівною 100%. Відповідно, max-width: 100%; не дасть ніякого результату, тому що MCW і так вище цього значення. У результаті вся наша верстка розтягнеться і вийде за межі контейнера, які б обмеження ми не ставили.
 
Ось приклад верстки з варіантом фіксованою колонки праворуч:
 
 
<div class="container">
    <div class="leftBlock">
       Левая колонка
    </div>
    <div class="rightBlock">
        Правая колонка
    </div>
</div>

 
 
.leftBlock, .rightBlock
{
    display: table-cell;
    vertical-align: top;
}

.leftBlock
{
    width: 100%;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

 
 Приклад на jsfiddle
 
Як бачимо поки ніяких проблем немає. Тепер додамо в ліву колонку елементи які будуть перевищувати ширину контейнера за вирахуванням колонки праворуч:
 
 Приклад на jsfiddle
 
Осередок зліва розтягнулася незважаючи на обмежену ширину контейнера, з'явився скролл. Саме час представити хак. Як я вже сказав раніше, max-width: 100%; тут не буде мати ніякого ефекту, але якщо ми задамо max-width: 0; то осередок займе всю доступну ширину з урахуванням ширини контейнера і осередки справа. На жаль, в специфікації немає уточнень з приводу цього ефекту, але він працює однаково у всіх браузерах.
Не забуваємо додати лівій колонці overflow: hidden; та word-wrap: break-word;, інакше вміст буде вилазити за межі контейнера.
 
 Остаточний приклад на jsfiddle
 
При другому варіанті з нефіксованим правої колонкою все буде рівно так само, тільки без завдання яких параметрів ширини.
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.