在溢出期間並排放置 CSS Div 元素

Question

我有兩個 div，我想把它們放在一起。 一個只是一個包含幾個字母的大 div，另一個是由包含文本的較小 div 組成。 當后一個 div 的子 div 太多（溢出屏幕的高度）時，它會出現在前一個 div 的下方而不是旁邊，但如果它不溢出就可以正常工作。

這是相關的 HTML 和 CSS 代碼：

 #projects { display: inline-block; } #project-title { color: black; font-size: 100px; } h2 { font-family: 'JetBrains Mono Regular', monospace; font-size: 30px; } #project { padding: 10px; border-radius: 5px; background-color: rgba(220, 220, 220, 0.8); color: black; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center; margin: 10px; width: 45%; } #project:hover { -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; color: white; background-color: black; }

 <div id="bar"> <a class="barlinks" href="{{url_for('home')}}" rel="noopener noreferrer">Home</a> <a class="barlinks" href="" rel="noopener noreferrer">Blog</a> <a class="barlinks" href="" rel="noopener noreferrer">Projects</a> </div> <div id="left"> <div id="intro"> <h1 id="project-title"> Projects </h1> </div> </div> <div class="projects"> {% for project in all_projects %} <a href=""> <div id="project"> <h2> {{project[0]}} </h2> <p id="project-desc"> {{project[1]}} </p> </div> </a> {% endfor %} </div>

注意：還有 Flask 代碼，但這只是用文本填充上述子 div。

這是我希望頁面的外觀：

Answer 1

您可以嘗試應用“display: flex”來實現這一點。

這是一個例子； 將以下 CSS 添加到您現有的 CSS 代碼中：

    .columns {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin-left: -.4rem;
        margin-right: -.4rem;
        overflow-x: auto;
    }
    .column {
        -ms-flex: 1;
        flex: 1;
        max-width: 100%;
        padding-left: .4rem;
        padding-right: .4rem;
        width: 50%;
    }

然后用帶有 class “列”的 div 包裝 2 個 div。 並將“列” class 添加到 2 個 div 中。 像這樣：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href = "{{ url_for('static',filename='styles/main.css') }}">
    </head>
    <body>
        <div id = "bar">
            <a class = "barlinks" href = "{{url_for('home')}}"  rel="noopener noreferrer">Home</a>
            <a class = "barlinks" href = ""  rel="noopener noreferrer">Blog</a>
            <a class = "barlinks" href=""  rel="noopener noreferrer">Projects</a>
        </div>
        <div class="columns">
            <div id = "left" class="column">
                <div id = "intro">
                    <h1 id = "project-title">
                        Projects
                    </h1>
                </div>
            </div>

            <div class = "projects column">
                {% for project in all_projects %}
                    <a href = "">
                        <div id = "project">
                            <h2>
                                {{project[0]}}
                            </h2>
                            <p id = "project-desc">
                                {{project[1]}}
                            </p>
                        </div>
                    </a>
                {% endfor %}
            </div>
        </div>
    </body>
</html>

在溢出期間並排放置 CSS Div 元素

問題描述

1 個解決方案

解決方案1
0 2022-08-08 10:54:34

在溢出期間並排放置 CSS Div 元素

問題描述

1 個解決方案

解決方案1 0 2022-08-08 10:54:34

解決方案1
0 2022-08-08 10:54:34