首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将内容从底部移动到侧边栏的右侧?

如何将内容从底部移动到侧边栏的右侧?
EN

Stack Overflow用户
提问于 2022-11-08 17:10:51
回答 2查看 36关注 0票数 2

我正在通过一些自我指导的编码课程,目前正在做一个小项目,建立一个神圣的圣杯布局与柔性盒。这是我的代码https://codepen.io/clayco/pen/KKeNjrm

目前,所有的卡片显示在侧边栏下,当他们应该在它的右边。

我猜这和身体被设置为列的弯曲方向有关,但是我试着改变弯曲的方向,但这无助于问题的解决。

不管怎样,这是我的密码。

代码语言:javascript
复制
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  height: 72px;
  background: darkmagenta;
  color: white;
  font-size: 32px;
  font-weight: 900;
  align-items: center;
  display: flex;
  text-indent: 16px;
}

.footer {
  height: 72px;
  background: #eee;
  color: darkmagenta;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  display: flex;
  min-width: 300px;
  height: calc( 100vh - 72px);
  flex-direction: column;
  gap: 50px;
}

.container {
  display: flex;
  flex-grow: 1;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  flex: 1 1 250px;
}

.cards {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: 50px;
  width: 1000px;
}
代码语言:javascript
复制
<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">⭐ - link one</a></li>
      <li><a href="#">‍♂️ - link two</a></li>
      <li><a href="#">️ - link three</a></li>
      <li><a href="#"> - link four</a></li>
    </ul>
  </div>
</div>

<div class="cards">
  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
  <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
<div class="footer">
  The Odin Project ❤️
</div>

非常感谢

EN

Stack Overflow用户

回答已采纳

发布于 2022-11-08 17:28:17

为容器和卡片创建一个公共父div示例

代码语言:javascript
复制
<div class="parent-element" style="display:flex; align-items="flex-start"">
     <div class="container"></div>
     <div class="cards"></div>
</div>
票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/74364637

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档