为什么我的两根柱子会下降并变成水平的？

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

我制作了一个 3 列的网格，其中 2 列用于内容，中间一列用于垂直线。左边的一条和垂直线向下并变成水平线。我怎样才能解决这个问题？我正在尝试复制这个网站，但没有内容（我在这里只写正文，没有网站标题）。

body {
  max-width: 1225px;
  width: 100%;
  margin: 0 auto;
  font-family: nyt-franklin, sans-serif;
  font-size: 14px;
  display: flex;
  justify-content: center;
  padding-top: 170px;
}

main {
  max-width: 1225px;
  width: 100%;
  margin: 0 auto;
}

#live-section {
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
}

.live {
  color: firebrick;
  font-size: 12px;
  display: inline;
  padding-right: 15px;
}

.live_b {
  display: inline;
}

#vertical-line {
  border-right: 1px solid darkgray;
  display: flex;
  flex-direction: column;
  position: static;
}

.two_column {
  display: grid;
  grid-template-columns: 69% 1px 29%;
  column-gap: 15px;
}

.main_column {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid black;
}

a .article_title:hover {
  color: #585858;
}

#live_c {
  padding: 10px 0 0 0;
}

.article_title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 5px 0;
}

.article_description {
  color: #5A5A5A;
  font-size: 0.875rem;
  padding: 0;
}

.updates {
  background-color: black;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
  display: inline;
  margin-left: 10px;
}

.article {
  display: block;
}

.part {
  min-height: 100%;
  border-bottom: 1.5px solid black;
}

.content {
  max-width: 15%;
  position: absolute;
  padding-bottom: 10px;
  border-bottom: 1.5px solid lightgray;
}

.plus {
  display: inline;
  font-size: 12px;
}

.sliding_image img {
  max-width: 525px;
  max-height: 350px;
  width: 100%;
  height: 100%;
  float: right;
}
<!DOCTYPE html>
<html lang="it-en">

<!-- data corrente, lente di ingrandimento, sliding window -->

<head>
  <title>Elaborato PPM Federico Monetti</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <main>
    <div>
      <section id="live-section">
        <p class="live"><b>LIVE</b></p>
        <p class="live_b"><b>Lorem ipsum dolor</b></p>
        <p class="live">xm ago</p>
        <p class="live_b">Lorem ipsum dolor sit</p>
        <p class="live">xm ago</p>
      </section>
    </div>
    <br>
    <div class="two_column">
      <div class="main_column" id="first_column">
        <div class="part">
          <div class="articles_list">
            <a href="">
              <section class="article">
                <div id="live_c">
                  <span class="live"><b>LIVE</b></span>
                  <span class="live">xm ago</span>
                </div>
                <div class="content">
                  <p class="article_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                  <p class="article_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut maximus urna. Etiam lacus dui, commodo vitae tempus quis, ornare pellentesque eros. Duis eget lectus</p>
                  <p class="plus">See new updates</p><button class="updates">x+</button>
                </div>
                <div class="content">

                </div>
              </section>
            </a>
          </div>
          <div>
            <section id="slide">
              <a href="">
                <div class="sliding_image">
                  <img src="img/placeholder.png">
                </div>
              </a>
            </section>
          </div>
        </div>
        <div class="main_column" id="vertical-line"></div>
        <div class="main_column" id="second_column">
          <p>aaaaaa</p>

        </div>
      </div>

  </main>
</body>

</html>

html css
1个回答
0
投票

我认为你只是放错了最后 2 个“main_column”元素，它们当前放置在 inside 另一个“main_column”元素，这就是它们垂直拉伸的原因。

一个快速修复方法是将元素放在第三个元素旁边，而不是像这样放在第三个元素内部：

<!DOCTYPE html>
<html lang="it-en">

<!-- data corrente, lente di ingrandimento, sliding window -->

<head>
  <title>Elaborato PPM Federico Monetti</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <main>
    <div>
      <section id="live-section">
        <p class="live"><b>LIVE</b></p>
        <p class="live_b"><b>Lorem ipsum dolor</b></p>
        <p class="live">xm ago</p>
        <p class="live_b">Lorem ipsum dolor sit</p>
        <p class="live">xm ago</p>
      </section>
    </div>
    <br>
    <div class="two_column">
      <div class="main_column" id="first_column">
        <div class="part">
          <div class="articles_list">
            <a href="">
              <section class="article">
                <div id="live_c">
                  <span class="live"><b>LIVE</b></span>
                  <span class="live">xm ago</span>
                </div>
                <div class="content">
                  <p class="article_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                  <p class="article_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut maximus urna. Etiam lacus dui, commodo vitae tempus quis, ornare pellentesque eros. Duis eget lectus</p>
                  <p class="plus">See new updates</p><button class="updates">x+</button>
                </div>
                <div class="content">

                </div>
              </section>
            </a>
          </div>
          <div>
            <section id="slide">
              <a href="">
                <div class="sliding_image">
                  <img src="img/placeholder.png">
                </div>
              </a>
            </section>
          </div>
        </div>
      </div>
      <div class="main_column" id="vertical-line"></div>
      <div class="main_column" id="second_column">
        <p>aaaaaa</p>
      </div>
  </main>
</body>

</html>

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