Предисловие: В предыдущих четырех статьях я представил принцип Цзюгунге и пример его применения. Он подошел к концу, но этот макет все еще имеет определенные ограничения. Его самое большое ограничение заключается в том, что он не может использовать изображения с прозрачными закругленными углами. Если в качестве метода макета интерфейса невозможно использовать прозрачные внешние закругленные углы, это сильно повлияет на масштабируемость этого макета, и его невозможно будет максимально повысить. Данная статья призвана кардинально решить эту проблему.
Я знаю, что основная причина этой проблемы заключается в том, что левый и правый пограничные столбцы посередине имеют одинаковую высоту по вертикали, поскольку их родительский контейнер представляет собой общий контейнер блока, а не независимый контейнер, а левый и правый угловые контейнеры в дно отрицательно смещены вверх. То, что перемещается над ними, блокирует цвет фона. Таким образом, если изображение в закругленном контейнере полупрозрачное или прозрачное, прозрачная часть будет отображать фон изображения с левой и правой границами.
Я уже обнаружил эту проблему при создании предыдущей модели « Нерушимая сетка из девяти квадратов ». В то время я также использовал прозрачные изображения с закругленными углами, чтобы создать изображения с закругленными углами, однако позже обнаружил эту проблему. Чтобы избежать проблем, я также использовал прозрачные изображения с закругленными углами. Чтобы избежать этой проблемы, прозрачная часть прозрачной части с закругленными углами добавлена с таким же цветом фона, как и основной контейнер. Но этот метод в конечном итоге не является окончательным решением. В нашей повседневной работе приходится использовать полупрозрачные закругленные углы для настройки интерфейса. Поэтому в той статье просто обошли проблему, не решая ее кардинально. После того, как статья была опубликована, внимательный друг наконец поднял этот вопрос, опробовав ее. Ха-ха, похоже, мне не избежать этой проблемы из-за лени.
Если вы знаете источник проблемы, исправить ее будет несложно.
Поскольку моя статья основана на статье « Нерушимая схема сетки девяти гонгов », если вы еще не читали эту статью, вы можете сначала прочитать ее, а затем прочитать эту статью. Это поможет вашему пищеварению!
Кажется, чтобы решить эту проблему, мне нужно внести некоторые структурные изменения в среднюю часть. Потому что я хочу, чтобы его контейнеры левой и правой границ по вертикали имели ту же высоту, что и область содержимого, то есть, когда высота текстового содержимого в области содержимого изменяется, высота его левой и правой границ будет корректироваться синхронно. Это типичный трехколоночный макет одинаковой высоты. Но что немного отличается от макета с тремя столбцами, который я обычно вижу, так это то, что я хочу, чтобы ширина средней области контента заполняла всю среднюю ширину, но это не 100% ширины, а 100% минус ширина границы левого и правого столбца. И эта ширина не является процентом, все они имеют фиксированные значения в пикселях. Эту проблему нужно решить методом, который я упоминал в предыдущей статье.
Для этого мне нужно изменить исходную структуру:
【Структурный слой】
Я добавляю родительский контейнер к трем левым, средним и правым контейнерам в середине и определяю для него имя класса middle. Структура средней области теперь должна быть такой:
<div class="средний">
<span class="m_l"></span>
<span class="m_r"></span>
<div класс="контекст">
<p>Область контента< p>
</div>
</div>