1

我正在做关于前端大师的课程。这是入门课程的第一个项目。我根据以下内容制作了网站：https ://btholt.github.io/intro-to-web-dev-v2/news.html

这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="P1.css">
    <link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet">
    <title>The News Times</title>
    <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
    <div>
        <h1 class="heading">The News Times</h1>
    </div>
    <div class="flex">
        <div class="blk s25">
            <h3 class="title">Student Learns HTML</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
        </div>
        <div class="blk s50">
            <h3 class="title">BREAKING: Puppies are adorable</h3>
            <img src="http://placecorgi.com/600/300" alt="Corgie" style="width: 96%;">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
        </div>
        <div class="blk s25">
            <h3 class="title">CSS is Apparently a Thing</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>    
        </div>
    </div>
    <div class="flex">
        <div class="blk s25 cust">
            <h3 class="title">Boy likes Turtle</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Voluptate, ut, cupiditate ducimus vitae blanditiis ex impedit debitis est tempora dolores nam sed. Esse nobis 
               ea inventore qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus 
               voluptatum explicabo voluptate, pariatur ullam laudantium eligendi.
            </p> 
        </div>
        <div class="blk s75">
            <div class="inner-flex">
                <div class="element politics">
                    <h1><a href="#">Politics</a></h1>
                </div>
                <div class="element technology">
                    <h1><a href="#">Technology</a></h1>
                </div>
                <div class="element local">
                    <h1><a href="#">Local</a></h1>
                </div>
                <div class="element sports">
                    <h1><a href="#">Sports</a></h1>
                </div>
                <div class="element opinion">
                    <h1><a href="#">Opinion</a></h1>
                </div>
                
            </div>
        </div>
    </div>
</body>
</html>

这是我的 CSS 代码：

body
{
    background-color: indianred;
}

.heading
{
    text-align: center;
    font-size: 120px;
    font-family: 'Cedarville Cursive', cursive;
    margin: 0px 0px;
}
.flex
{
    display: flex;
    align-items:stretch;
    border: 2px solid black;
    align-content: center;
    margin:2.0%;
    height: 100%;
   
}
.blk
{
    padding: 7px;
    text-align: center;
    
}
.s50
{
    width: 50%;
    border-left: 2px solid black;
    border-right: 2px solid black; 
    
}

.s25
{
    height: inherit;
    width: 25%;
}
.s75
{
    width: 75%;
}
.title
{
    font-family: 'Aladin', cursive;
    font-size: 60px;
}

.cust
{
    border-right: 2px black solid;
}
.inner-flex
{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}



p{
    text-align: justify;
}
.element
{
    text-align:left;
}
.politics
{
    background-color: #ffeaa7;;
}

.technology
{
    background-color: #81ecec;;
}

.local
{
    background-color: #55efc4;;
}

.sports
{
    background-color: #a29bfe;;
}

.opinion
{
    background-color: #74b9ff;;
}

但是，您会在放大页面时看到，inner-flex div 不会占据整个长度。任何想法如何解决它？

4

1 回答 1

1

这是因为你有不同的元素结构。

在原始示例中，父 flex 行 ( <section class="row">) 已设置align-items: stretch;css 属性。这负责拉伸。

原来的：

<section class="row">
    <article class="story quarter">
      <!-- content //-->
    </article>
    <ul class="story three-quarter other-sections">
       <!-- links //-->
    </ul>
</section>

这实际上在您的代码中起作用，但它仅适用于额外的容器 div ( <div class="blk s75">)，不适用于该容器的内容。因此，您.inner-flex不会被拉伸，而是会获得适合其内容的高度。

你的代码：

<div class="flex">
    <div class="blk s25 cust">
        <!-- content //-->
    </div>
    <div class="blk s75">
        <div class="inner-flex">
            <!-- links //-->
        </div>
    </div>
</div>

您可以通过修复结构并消除该额外容器来解决此问题，或者（如评论中已建议的那样）通过将 css 属性height: 100%;应用于 class 来解决此问题.inner-flex。

您还可以将 css 属性flex-grow: 1;应用于.element类以缩小框之间的间隙（这在技术上也建议在评论中，以及flex: 1;设置 flex-grow 等的快捷方式属性）。

于 2020-09-06T22:01:47.433 回答