высота фрейма, разрушающегося при вертикальном выравнивании по центру - PullRequest
Новая
       3

высота фрейма, разрушающегося при вертикальном выравнивании по центру

0 голосов
/ 30 марта 2020

У меня есть следующий код, который отображает iframe в верхней левой части экрана. Я хочу сохранить одинаковые размеры рамки и выровнять ее так, чтобы центр iframe и текст на правой стороне экрана находились на одном горизонтальном уровне. Если я использую align-items:center;, рамка разрушится. Как это исправить? 

<html>
    <head>
        <style>
            .container{
                display:flex;
                flex-direction:row;
                /*align-items: center;*/

            }
            .column{
                flex:1 1 0px;
                /*align-self: center;*/
            }

            iframe{
                width:100%;
                height:100%;
                max-height: 50vh;
                border-style:solid;
                border-color: black;
            }
        </style>
    </head>
    <body>

        <div class="container" id="interests_container">
            <div class="column">
                <iframe> </iframe>
            </div>
            <div class="column">
                <h1 id="interests">Interests</h1>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
                <p> abcd abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd</p>
            </div>
        </div>

        <div class="container" id="photos_container">
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>
    </body>
</html>

Примечание: я уже видел Расширение iframe внутри Flexbox , но это не помогло мне.

1 Ответ

0 голосов
/ 30 марта 2020

Отказ от ответственности:

Это скорее обходной путь, чем решение вашей проблемы. Но, возможно, это поможет в вашей ситуации.

Обходной путь

Вместо сгибания по центру .column вы можете оставить столбец вытянутым на всю высоту (не применяя align-self: center или применяя align-self: stretched) и вместо этого центрируйте iframe внутри столбца.

Одним из решений для центрирования iframe будет применение этого CSS к iframe: 

position:relative;
top: 50%;
transform: translateY(-50%);


Вот JSFiddle с обходным путем, который я только что описал: https://jsfiddle.net/arb102tc/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...