主要内容是右对齐的，除非内容很大

问题描述 投票：0回答：1

我有一个 SPA，其中主视图是 HTML 

main
正文中的标题、导航栏和响应式内容。

内容包含一个或多个

<article>
（我已将它们交换为
<div>
，没有区别）， 当内容足够多（~100 个字符或更多）时，文章会从左到右正确显示 并响应屏幕大小调整。

但是当他们只有少量内容时，他们就变得合理了。

不起作用 - 右对齐（每篇文章中都有少量内容）：

Not working (small content)

工作正常 - 左对齐（每篇文章内容较大）：

Working (larger content)

这是复制问题的 HTML 和 CSS 的简化版本（我删除了侧面导航栏，这使得 行为没有区别。

这些示例显示了问题 - 使用 lorum ipsum 文本填写 

<p>...</p>
内容以 看到问题消失。

:root{
    --base-clr: #11121a;
    --header-clr: #8a918c;
    --header-text-clr: #2d302e;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #e6e6ef;
    --accent-clr: #5e63ff;
    --secondary-text-clr: #b0b3c1;
    --header-bar-height: 40px;
}
*{
    margin: 0;
    padding: 0;
}
html{
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5rem;
}

body{
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--base-clr);
    color: var(--text-clr);
}

#spa {
    display: grid;
    grid-template-areas:
    "header navbar content";
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
}

main{
    grid-area: content;
    padding: min(30px, 7%);
    min-height: calc(100vh - var(--header-bar-height));
}

main p{
    color: var(--secondary-text-clr);
    margin-top: 5px;
    margin-bottom: 15px;
}


article{
    border: 1px solid var(--line-clr);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    border-radius: 1em;
    margin-bottom: 20px;
    padding: min(3em, 15%);

    h2, p { margin-top: 1em }
}
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>GridCss</title>
    <link href="./app.css" rel="stylesheet"/>
</head>

<body>
    <div id="app">
        <div id="spa">
            <header>
                Header
            </header>

            <main>
                <div class="grid">
                    <article>
                        <img src="https://www.mig-welding.co.uk/forum/data/avatars/s/40/40757.jpg" alt="Sample photo">
                        <div class="text">
                            <h3>Seamlessly visualize quality</h3>
                            <p>small text</p>
                            <button>Here's why</button>
                        </div>
                    </article>
                    <article>
                        <img src="https://www.mig-welding.co.uk/forum/data/avatars/s/40/40757.jpg" alt="Sample photo">
                        <div class="text">
                            <h3> Seamlessly visualize quality</h3>
                            <p>tiny</p>
                            <button>Here's why</button>
                        </div>
                    </article>
                </div>
            </main>

        </div>
    </div>
</body>


</html>

html css css-grid
1个回答
0
投票

:root{
    --base-clr: #11121a;
    --header-clr: #8a918c;
    --header-text-clr: #2d302e;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #e6e6ef;
    --accent-clr: #5e63ff;
    --secondary-text-clr: #b0b3c1;
    --header-bar-height: 40px;
}
*{
    margin: 0;
    padding: 0;
}
html{
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5rem;
}

body{
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--base-clr);
    color: var(--text-clr);
}

.grid{
    display: grid;
  padding:auto;
    grid-template-areas:
    "header navbar content";
   
  
}

main{
   grid-template-columns: auto 1fr;
  display:flex;
    grid-area: content;
    padding: min(30px, 7%);
  box-sizing:border-box;
    
}

main p{
    color: var(--secondary-text-clr);
    margin-top: 5px;
    margin-bottom: 15px;
}


article{
    border: 1px solid var(--line-clr);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    border-radius: 1em;
    margin-bottom: 20px;
    padding: min(3em, 15%);

    h2, p { margin-top: 1em }
  
}
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>GridCss</title>
    <link href="./app.css" rel="stylesheet"/>
</head>

<body>
   
        
            <header>
                Header
            </header>

            <main>
                <div class="grid">
                    <article>
                        <img src="https://www.mig-welding.co.uk/forum/data/avatars/s/40/40757.jpg" alt="Sample photo">
                        <div class="text">
                            <h3>Seamlessly visualize quality</h3>
                            <p>small text</p>
                            <button>Here's why</button>
                        </div>
                    </article>
                    <article>
                        <img src="https://www.mig-welding.co.uk/forum/data/avatars/s/40/40757.jpg" alt="Sample photo">
                        <div class="text">
                            <h3> Seamlessly visualize quality</h3>
                            <p>tiny</p>
                            <button>Here's why</button>
                        </div>
                    </article>
                </div>
            </main>

       
   
</body>


</html>

删除不必要的包装，例如“spa”和“app”

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.