我如何修复我的CSS，以便宽度同时考虑填充和边框？

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

简单来说，我希望我这里的侧边栏是页面宽度的20%，而文章本身是80%。由于我的不同部分中的填充，宽度是偏移的，这意味着我必须降低值才能使其全部并排适合。

这是我的 HTML：

<head>
    <title>big balls</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav>
        <ul>
            <a href="http://www.github.com" target="_blank"><img class="icon" src="images/github.png" /></a>
            <a href="http://www.google.com" target="_blank"><img class="icon" src="images/google.png" /></a>
            <a href="https://en.wikipedia.org" target="_blank"><img class="icon" src="images/wikipedia.jpg"></a>
            <a href="https://gitlab.com" target="_blank"><img class="icon" src="images/gitlab.png" /></a>
        </ul>
    </nav>
    <section class="sidebar">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna massa, bibendum vel tellus non, temporus purus, a luctus enim facilisis quis. <u>Praesent consequat molestie</u> velit in interdum.
        </p>            viverra justo. Quisque vestibulum eleifend mauris, viverra facilisis odio ullamcorper quis. Pellentesque
            lobortis dolor ac ultrices malesuada. Pellentesque facilisis tincidunt iaculis. Fusce feugiat nunc metus.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam in sem nec mi
            porta ultrices eget at lectus. In sagittis eu est in interdum. Aliquam in massa ac lacus cursus viverra eget
            sit
            amet justo. Praesent eleifend, magna vitae aliquet egestas, purus risus convallis purus, non aliquet diam
            ipsum
            vitae dui. Vivamus mollis metus eu lectus malesuada, non tempor nulla accumsan. Aliquam erat volutpat.
            Vivamus
            convallis lac
    </section>

    <article>
        
        <p>
            Sed sollicitudin placerat quam, a semper massa pharetra a. Donec commodo malesuada neque, et congue orci
        </p>
        <p>
            Donec sit amet dignissim lorem. Ut at neque at ex blandit dapibus vel nec nisi. Mauris malesuada diam vitae
        </p>
        <p>
            <u>Suspendisse et fermentum metus, nec vulputate enim.</u> Aenean eu sem risus. Ut viverra porta est, at tincidunt
        </p>
        <p>
            Aliquam porta pharetra fermentum. Nulla pulvinar imperdiet interdum. Nulla placerat commodo blandit. Mauris
        </p>
        <p>
            Sed accumsan orci ante, ut auctor mi rhoncus eget. Aliquam a dolor pulvinar, malesuada enim quis, fringilla
            faucibus vulputate.
        </p>
        <p>
            Quisque ullamcorper mauris at lectus rhoncus, a auctor sem lobortis. Sed lectus sapien, vehicula quisest.
        </p>
        <p>
            Duis lobortis ex neque. Aenean maximus metus congue augue elementum, et commodo est mattis. Morbi
            augue libero, at scelerisque sem volutpat id.
        </p>
        <p>
            Nam vehicula mauris eu commodo imperdiet. Etiam turpis tortor, semper sed dolor ornare, rutrum tincidunt
        </p>
        <p>
            Vestibulum sed molestie ligula, vel ultricies arcu. Nullam dapibus neque rhoncus tellus pulvinar, vitae
            lacinia
        </p>
        <p>
            Curabitur condimentum nulla urna, a dictum magna egestas sit amet. Phasellus sapien lectus, suscipit at
        </p>
        <p>
            Mauris sed sapien vitae diam laoreet semper. Aenean porta fringilla magna non rhoncus. Curabitur vestibulum

        </p>
        <p>
            Nunc lacinia nec mi non malesuada. Vivamus suscipit non turpis ut hendrerit. Nunc at mauris viverra,

        </p>
    </article>
    <footer>
        <div class="footerbackground">
            <div class="footersection">
                <p>
                    bullshittery
                </p>
        </div>      
    </footer>
</body>

还有我的CSS：

ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    float: left;
    width: calc(80% - 30px);
    padding: 5px;
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    clear: left;
    width: 100%;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.sidebar {
    float: left;
    width: calc(20%);
    background-color: #fdf6e3;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
.footersection {
    float:left;
}
.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
}

我现在刚刚学习 HTML 和 CSS，所以如果解决方案相当简单，我深表歉意。

我已经尝试过将CSS中的box-sizing更改为border-box，但没有成功。将文章的宽度更改为 78% 之类的值是可行的，但它与网页的其余部分没有很好地对齐。

html css width padding sizing
1个回答
0
投票

对于侧边栏和文章部分的并排视图，您可以通过父 div 非常简单地使用 flex 属性。有关更多详细信息，请查看示例片段。

ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    width: 80%;
    padding: 5px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px 0;
    border-radius: 5px;
    width: 100%;
    display: flex;
   text-align: center;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.wrapper{
display: flex;
    margin-top: 10px;
    gap: 0 10px;
}
.sidebar {
    width: 20%;
    background-color: #fdf6e3;

    border-radius: 5px;
    box-sizing: border-box;
}

.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
<nav>
    <ul>
        <a href="http://www.github.com" target="_blank"><img class="icon" src="images/github.png" /></a>
        <a href="http://www.google.com" target="_blank"><img class="icon" src="images/google.png" /></a>
        <a href="https://en.wikipedia.org" target="_blank"><img class="icon" src="images/wikipedia.jpg"></a>
        <a href="https://gitlab.com" target="_blank"><img class="icon" src="images/gitlab.png" /></a>
    </ul>
</nav>

<div class="wrapper">
<section class="sidebar">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna massa, bibendum vel tellus non, temporus
        purus, a luctus enim facilisis quis. <u>Praesent consequat molestie</u> velit in interdum.
    </p> viverra justo. Quisque vestibulum eleifend mauris, viverra facilisis odio ullamcorper quis. Pellentesque
    lobortis dolor ac ultrices malesuada. Pellentesque facilisis tincidunt iaculis. Fusce feugiat nunc metus.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam in sem nec mi
    porta ultrices eget at lectus. In sagittis eu est in interdum. Aliquam in massa ac lacus cursus viverra eget
    sit
    amet justo. Praesent eleifend, magna vitae aliquet egestas, purus risus convallis purus, non aliquet diam
    ipsum
    vitae dui. Vivamus mollis metus eu lectus malesuada, non tempor nulla accumsan. Aliquam erat volutpat.
    Vivamus
    convallis lac
</section>

<article>
  <h2>Article</h2>
    <p>
        Sed sollicitudin placerat quam, a semper massa pharetra a. Donec commodo malesuada neque, et congue orci
    </p>
    <p>
        Donec sit amet dignissim lorem. Ut at neque at ex blandit dapibus vel nec nisi. Mauris malesuada diam vitae
    </p>
    <p>
        <u>Suspendisse et fermentum metus, nec vulputate enim.</u> Aenean eu sem risus. Ut viverra porta est, at
        tincidunt
    </p>
    <p>
        Aliquam porta pharetra fermentum. Nulla pulvinar imperdiet interdum. Nulla placerat commodo blandit. Mauris
    </p>
    <p>
        Sed accumsan orci ante, ut auctor mi rhoncus eget. Aliquam a dolor pulvinar, malesuada enim quis, fringilla
        faucibus vulputate.
    </p>
    <p>
        Quisque ullamcorper mauris at lectus rhoncus, a auctor sem lobortis. Sed lectus sapien, vehicula quisest.
    </p>
    <p>
        Duis lobortis ex neque. Aenean maximus metus congue augue elementum, et commodo est mattis. Morbi
        augue libero, at scelerisque sem volutpat id.
    </p>
    <p>
        Nam vehicula mauris eu commodo imperdiet. Etiam turpis tortor, semper sed dolor ornare, rutrum tincidunt
    </p>
    <p>
        Vestibulum sed molestie ligula, vel ultricies arcu. Nullam dapibus neque rhoncus tellus pulvinar, vitae
        lacinia
    </p>
    <p>
        Curabitur condimentum nulla urna, a dictum magna egestas sit amet. Phasellus sapien lectus, suscipit at
    </p>
    <p>
        Mauris sed sapien vitae diam laoreet semper. Aenean porta fringilla magna non rhoncus. Curabitur vestibulum

    </p>
    <p>
        Nunc lacinia nec mi non malesuada. Vivamus suscipit non turpis ut hendrerit. Nunc at mauris viverra,

    </p>
</article>
</div>


<footer>
    <div class="footerbackground">
        <div class="footersection">
            <p>
                bullshittery
            </p>
        </div>
        <div class="footersection">
            <p>
                more saosudsiod
            </p>
        </div>
    </div>
</footer>

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