Question

我一直在尝试重写CSS布局以使用flexbox。我已经玩了很长时间，但似乎无法获得我想要的结果。我希望能够在右侧有一个固定的导航栏列，在左侧有两个可滚动的列。

<div class="container">
  <nav>
    <hgroup>
      <h2> Portafolio </h2>
      <img id='logo' src="pic">
      <h5> a portafolio </h5>
    </hgroup>

    <ul class="navList">
      <li><a href="aboutPage.html">About me</a></li>
      <li><a href="CV.html">CV</a></li>
      <li><a href="login.html">Log in</a></li>
    </ul>

  </nav>
  <div class="column1">
    <div class="firstImage">
      <div class="overlay">
        <figure>
          <img id='img1' src="1.png"><br>
        </figure><br>
      </div>
    </div>
    <div class="secondImage">
      <figure>
        <img id='img2' src="2.png">
      </figure>
    </div>
  </div>

  <div class="column2">
    <div class="overlay">
      <figure>
        <img id='img3' src="3.png">
      </figure>
    </div>
  </div>
</div>

如您所见，我有一个container和nav，column1和column2。我只希望这三个列彼此相邻并且固定一个导航。谢谢

Answer 1

这是一个入门的基本结构。注释包含在下面的CSS中。

body {
  overflow: hidden; /* Remove vertical scrolling */
  margin: 0;
}

.container {
  height: 100vh; /* Take up entire viewport */
  display: flex;
}

nav {
   background-color: blue;
   flex: 1; /* Take up half the horizontal space as other columns */
}

nav,
nav a {
  color: white;
}

.column1,
.column2,
nav {
  padding: 1em;
}

.column1,
.column2 {
  flex: 2; /* Take up double the horizontal space of nav column */
  overflow: auto; /* Enable vertical scrolling per column */
  height: 100vh;
}

.column1 {
  background-color: orange;
}

.column2 {
  background-color: salmon;
}

<div class="container">
  <div class="column1">
    <div class="firstImage">
      <div class="overlay">
        <p>
         <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid totam, rerum. Quibusdam rerum qui earum numquam eveniet perferendis? Reprehenderit, ad velit voluptate earum numquam eligendi eaque nulla. Ullam, incidunt, debitis!</span>
         <span>Porro minus, cumque quae libero aut delectus inventore autem fuga nemo veniam. Omnis debitis, tempora quaerat alias quae, odit! Voluptate corrupti id accusantium perferendis aperiam, reiciendis vel repellendus deleniti cum!</span>
         <span>Molestiae totam dolorem voluptatum similique accusantium. Iste eaque, deleniti aut illo quasi alias, eius adipisci dolorem eos dicta debitis aliquid totam. Deleniti blanditiis optio, harum quis ducimus! Facilis, nemo, dolor!</span>
         <span>Porro minus, cumque quae libero aut delectus inventore autem fuga nemo veniam. Omnis debitis, tempora quaerat alias quae, odit! Voluptate corrupti id accusantium perferendis aperiam, reiciendis vel repellendus deleniti cum!</span>
         <span>Molestiae totam dolorem voluptatum similique accusantium. Iste eaque, deleniti aut illo quasi alias, eius adipisci dolorem eos dicta debitis aliquid totam. Deleniti blanditiis optio, harum quis ducimus! Facilis, nemo, dolor!</span>
         <span>Porro minus, cumque quae libero aut delectus inventore autem fuga nemo veniam. Omnis debitis, tempora quaerat alias quae, odit! Voluptate corrupti id accusantium perferendis aperiam, reiciendis vel repellendus deleniti cum!</span>
         <span>Molestiae totam dolorem voluptatum similique accusantium. Iste eaque, deleniti aut illo quasi alias, eius adipisci dolorem eos dicta debitis aliquid totam. Deleniti blanditiis optio, harum quis ducimus! Facilis, nemo, dolor!</span>         
        </p>
      </div>
    </div>
    <div class="secondImage">
      <figure>
        <img id='img2' src="2.png" alt="">
      </figure>
    </div>
  </div>

  <div class="column2">
    <div class="overlay">
      <figure>
        <img id='img3' src="3.png" alt="">
      </figure>
      <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis expedita labore eos vitae perferendis, enim itaque ipsam, eius quos repudiandae eum harum dolore explicabo maiores. Debitis amet sapiente facilis voluptates.</span>
      <span>Repudiandae obcaecati veniam quidem ut soluta quo recusandae numquam consectetur, tenetur, quisquam corporis aspernatur, at porro. Neque ea exercitationem cupiditate officiis molestias illo minus, rem, eveniet earum laboriosam mollitia beatae.</span>
      <span>Perferendis, voluptatibus eos voluptate fugit asperiores assumenda animi quo eum vitae, velit aspernatur! Omnis, ipsum, atque. Iusto corporis dicta veniam deleniti quaerat harum minima maxime debitis quasi sint? A, doloribus.</span>
      <span>Accusantium animi labore earum nesciunt ad, nemo ea nulla, voluptate sint, tenetur placeat velit dicta blanditiis inventore, beatae corporis aut suscipit incidunt? Repellendus debitis odit blanditiis, id enim, nulla nam!</span>
      <span>Iusto ad error cumque quia expedita omnis. Repudiandae ipsa, laudantium officia amet, accusantium libero aliquid, temporibus deserunt error itaque, adipisci. Fuga, quas accusantium aliquid ipsam reiciendis repudiandae minus tempora deleniti!</span>
      <span>Debitis earum rerum quae aliquam consequuntur dolores maiores officia illo cupiditate, facilis nobis dignissimos cum accusamus sint, architecto sequi culpa ipsam a. Ratione magnam unde non perspiciatis quo magni, atque.</span>
      <span>Veniam accusamus perspiciatis, modi, quidem, temporibus amet doloribus quisquam, adipisci repudiandae suscipit earum. Nisi assumenda ipsum aliquid, voluptates provident unde corporis rerum ratione perspiciatis illo dicta quae saepe facilis impedit!</span>
      <span>Commodi minima temporibus dolore beatae. Voluptatibus autem quasi soluta amet rem numquam officia cum sapiente. Quo ea, aut cum exercitationem tenetur aspernatur ad velit in dolore veniam beatae ut blanditiis.</span>
      <span>Quam illo debitis, necessitatibus in porro pariatur ea quibusdam atque. Ratione impedit blanditiis deserunt quos, eveniet, consequatur neque, ullam non quidem, dignissimos labore nemo sint at dolorum. Ab, obcaecati ratione.</span>
      <span>Consequatur, ad aliquid, eius dolorem iusto repellendus. Fugiat, ratione repellat! Consequuntur harum repellendus fugiat accusamus autem eos sequi voluptatem distinctio nobis delectus libero amet odit eligendi, illum voluptatum asperiores dolor.</span>
      <span>Consequuntur obcaecati iure, quod aliquid aut distinctio amet beatae quibusdam veritatis, quidem impedit, qui blanditiis quasi. Ut molestias expedita ullam dolorem laboriosam modi optio, perspiciatis, nesciunt commodi ducimus cupiditate quisquam!</span>
      <span>Doloremque laborum provident accusamus, quia, neque reprehenderit optio omnis cum quas, tenetur impedit numquam eaque sapiente, adipisci consectetur! Velit asperiores minima doloremque, error earum officia! Aut esse mollitia similique sunt.</span>
      <span>Dolorem sapiente fugit corrupti ipsum reprehenderit, quam molestiae, nobis, unde deserunt inventore recusandae delectus aut odit. Dolor ullam maiores voluptas non aliquid nesciunt atque sequi repudiandae iste dignissimos, provident debitis.</span>
      <span>Eligendi possimus fugiat repudiandae iure. Maxime eligendi possimus, ducimus, aliquid voluptate, quaerat sapiente excepturi perspiciatis repudiandae iure recusandae at modi debitis natus animi iste! Ad beatae, itaque quos corrupti quae.</span>
      <span>Harum dolorum maiores tenetur cupiditate accusamus optio dolorem quisquam eveniet temporibus commodi. Incidunt magnam sed aliquam doloribus veritatis voluptatibus facilis? Totam, molestias. Sapiente enim necessitatibus voluptatem iure inventore. Officiis, ad.</span>
      <span>Culpa laboriosam obcaecati soluta, incidunt ratione tempora harum nihil enim nemo hic numquam dolorem recusandae, accusamus facere architecto maiores repellat non, consequuntur reprehenderit. Eligendi, consequuntur, facere. Totam iste distinctio natus.</span>
      <span>Consectetur numquam veniam soluta itaque, magni ad, eius, modi unde molestiae rerum ex pariatur mollitia ea atque alias fugit repellendus? Blanditiis deserunt incidunt accusantium fuga mollitia tempore suscipit animi perferendis.</span>
      <span>Molestias dolore facere, accusantium, exercitationem rerum tempora similique. Praesentium pariatur ad, provident doloribus eos, consequuntur debitis quia voluptatum explicabo. Molestias ad vitae est natus enim corporis, ipsam necessitatibus, magni unde?</span>
      <span>Aperiam veniam officiis, illo ipsa incidunt ipsam eum, libero expedita ratione mollitia, iusto, vitae. At odit necessitatibus expedita iste quis laudantium saepe minima aliquid eaque! Nihil doloribus magni odio, omnis.</span>
      <span>Blanditiis atque rerum nam reiciendis aliquam porro autem itaque voluptate quaerat recusandae fuga, illum amet! Recusandae porro quia temporibus, explicabo quaerat asperiores dolorum vero nam impedit cupiditate ad ut voluptates.</span></p>  
    </div>
  </div>

  <nav>
    <hgroup>
      <h2> Portafolio </h2>
      <h5> a portafolio </h5>
    </hgroup>

    <ul class="navList">
      <li><a href="aboutPage.html">About me</a></li>
      <li><a href="CV.html">CV</a></li>
      <li><a href="login.html">Log in</a></li>
    </ul>

  </nav>
</div>

jsFiddle

如何在Flexbox中使用固定的导航栏创建3列布局

1 个答案: