html - 等间距排列div-6ren

html - 等间距排列div

转载作者：行者123 更新时间：2023-11-28 02:27:42

我正在参加 FCC 挑战赛[建立个人文件][1]

我将不同的元素都放在同一行中，我希望它根据响应的屏幕宽度进行排列。我使用 flex-direction : column 来在其中垂直居中排列 div。然后在细节类中使用 flex with flex-direction:row 和 flex-wrap:wrap ， justify-content:space-around 。这部分未按预期工作。

 #projects, #contacts{
    height:90vh;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:center;
    align-content:space-evenly;
  }

.details{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-around;
 }

我的工作:

*{
  margin:0;
  padding:0;
}

body{
  border:0;
  padding:0;
  min-height:100%;
  height:100%;
  font-family: 'Merriweather', serif;
}


h1, h2,h3{
 text-align:center;
 }

nav{
  text-align:right;
  position:fixed;
  width:100%;
}

nav ul li{
  display:inline-block;
  margin:0 25px 20px;
  padding:10px;
  padding-top:20px;
  cursor:pointer;
}
nav ul li a{
  text-decoration:none;
  color:white;
}

nav ul li:hover{
  transform:scale(1.5);
  background-color:#36688D;
}

nav ul li a:hover{
    color:white;
}

#welcome-section{
  min-height:100vh;
  text-align:center;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background-image: linear-gradient(to bottom, #a0a1b2, #b794b2, #d38591, #d4845c, #aa932b);
 }

#welcome-section p{ 
  color:green;
  font-size:larger;
}

#welcome-section strong{
  color:#1671D6;
  font-size:larger;
}

#detail *{
  margin-top:4vh;
}

#myprofile{
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
}

#myprofile span{
  margin: 0 6em;
  font-weight:700;
  font-size:17px;
  color:#FFD670;
}

#myprofile lable{
  font-weight:800;
  color:white;
}

#projects, #contacts{
  height:90vh;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content:center;
  align-content:space-evenly;
}

#projects{
background-image: linear-gradient(to bottom, #aa932b, #9a9b38, #8ba247, #7ba859, #6dad6c);
 }

.details{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:space-around;
}

.section-title{
  padding: 10px 0;
  align-item:center;
  margin-bottom:20px;
  font-size:larger;
  color:#135394;
}

.project-tile{
 padding:1.5vh 2vw;
 flex: 0 1 29%;
}

.title{
  color:#fff;
  text-align:center;
  background-color:#a00606;
}

#contacts{
  background-image: linear-gradient(to bottom, #6dad6c, #42aa92, #3fa2ab, #6196af, #7e8ba3);
 }

.contact-details {
  display: inline-block;
  font-weight: bold;
  margin: 0 35px 45px 35px;
  list-style-type: none;
  border: 2px solid #90C695;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #e0ebe8;
  color: green;
  text-align:center;
  text-decoration: none;
}

.contact-details:hover{
  background: #307860;
  color: #e0ebe8;
}

footer {
  padding: 20px;
  background: #AAAAAA;
  color: white;
  text-align:center;
  width:100%;
  clear: both;
  position: relative;
  z-index: 10;
  height: 3em;
  margin-top: -3em;
}

footer a {
  color: white;
}

@media only screen and (max-width: 500px) {
  nav ul {
    text-align: center;
  }
  nav ul li {
    margin: 20px;
  }
  #project {
    margin: 40px 0;
  }
}

<html>
  <head>
    <title>Personal Porfolio-Dev</title>
    <link href="https://fonts.googleapis.com/css?family=Charmonman:700|Merriweather:300" rel="stylesheet">
  </head>
<body>
<nav>
  <div id='navbar'>
    <ul>
      <li><a href='#welcome-section'>About</a></li>
      <li><a href='#projects'>Work</a></li>
      <li><a href='#contacts'>Contact</a></li>
  </div>
</nav>

<div id='welcome-section'>
  <div id='detail'>
  <h1>Hello</h1>
  <h3>My name is <strong>Devendra</strong>,</h3>
  <p>I am a web developer</p>
 <div id='myprofile'>
   <span><lable>Age:</lable>30</span>
   <span><lable>Country:</lable>India</span>
   <span><lable>Working at:</lable>NMDC Ltd</span>
 </div>
  </div>
</div>
  
<div id='projects'>
  <div class='section-title'><h2>Some of my projects</h2></div>
  <div class='details'>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/XxJZYL' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='tribute page image'></a>
    <p class='title'>Tribute Page</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/BqZRaN' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image'></a>
    <p class='title'>Java Documentation</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/dgOgRv' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Product Landing image'></a>
    <p class='title'>Product Landing Page</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/BqzErY' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Plan Comparision image'></a>
    <p class='title'>Plan Comparision</p>
  </div>
  <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/XxKboz' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Survey image'></a>
    <p class='title'>Survey Form</p>
  </div>
   <div class='project-tile'>
    <a href='https://codepen.io/devendra-singh/pen/rZgQKQ' ><img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Moon cresent image'></a>
    <p class='title'>Moon Cresent</p>
  </div>
  </div>
</div>
  
<div id="contacts" >
  <div class="section-title">
    <h2>Connect with me below....</h2>
  </div>
  <div class='details'>
  <a href="https://www.facebook.com/DevSingh616" target="_blank" class="contact-details">Facebook</a>
  <a href="https://github.com/Devendra616/" target="_blank"  id ='profile-link' class="contact-details">GitHub</a>
  <a href="https://twitter.com/DevNmdc" target="_blank" class="contact-details">Twitter</a>
  <a href="mailto:devendra.fe@gmail.com" class="contact-details">Send a mail</a>
  </div>
</div>
  
<footer>This is created as assignment of FCC
  <p>&copy; Created for <a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a></p>
</footer>
  </body>

最佳答案

首先，阅读 this .您的 flexbox 实现存在一些问题，因此为了调试目的简化您的布局可以帮助您了解 future 的问题。

#projects {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  background-image: linear-gradient(to bottom, #aa932b, #9a9b38, #8ba247, #7ba859, #6dad6c);
}

.project-tile {
  padding: 1.5vh 2vw;
  flex: 0  auto;
}

.project-tile a {
  display: block;
}

.title {
  color: #fff;
  text-align: center;
  background-color: #a00606;
}

<div id='projects'>
  <div class='project-tile'>
    <a href='#' alt='tribute page image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image' />
    </a>
    <p class='title'>Tribute Page</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Java Documentation image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' alt='Java Documentation image' />
    </a>
    <p class='title'>Java Documentation</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Product Landing image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Product Landing Page</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Plan Comparision image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Plan Comparision</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Survey image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Survey Form</p>
  </div>
  <div class='project-tile'>
    <a href='#' alt='Moon cresent image'>
      <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS80u23tNHrHT8iyh0KLbkG1cRB0IPqhcjFGb-2nrYbL4ZlW8cRZQ' />
    </a>
    <p class='title'>Moon Cresent</p>
  </div>
</div>

关于html - 等间距排列div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52880096/

文章推荐：用于导入语义(链接)数据的 HTML 元素

文章推荐： c++ - SetScrollPos 阻塞

文章推荐： c++ - 多次调用更新时 Qt 应用程序崩溃

方括号中的 shell 间距
这个问题在这里已经有了答案: Why should there be spaces around '[' and ']' in Bash? (4 个回答) 3年前关闭。作为初学者，我没有在任何地方找
java - 回文检查器 - 间距
我有一个程序，我在其中输入 Java 程序来检查输入的字符串是否为回文。我有 2 个问题正在发生，我似乎一辈子都无法解决。我已经输入了代码，这样它会告诉我它是否是一个回文，当所有小写字母不涉及空格时
CSS 表格单元格填充、间距
table { border: 0; padding: 0; border-collapse: collapse;
ios - UIcollectionView 间距
我有 10 个单元格，其中第 6 个单元格的宽度必须与其他单元格不同。我试图在流委托(delegate)方法中更改它。但是从第 7 个单元格到第 10 个单元格的间距出了点问题。 func coll
新闻发布链接的 CSS 间距
我只是希望将这些新闻发布很好地隔开，以便在每次发布之间留出空隙。我在下面附上了一张图片来解释。我试图增加下面的填充，但这没有用。感谢您的帮助 .headline { position: absolut
css - 跨浏览器删除表格单元格填充/间距
如何使用 css 删除表格结构中烦人的单元格间距和/或填充？如果解决方案在 IE7-9、Firefox 和 Chrome 中有效，请加倍支持! 为什么CSS这么难!真让人抓狂! 最佳答案通常，在该表
html - 按钮外的边框填充/间距
我在我正在使用的网站上设置了按钮。我想在按钮外创建一个 2px 的边框，有一点间距。请参见设计图像。我可以创建边框，但不能创建边框之外的间距。这是当前的开发站点。按钮是第一个图形。到目前为止我已经
具有响应式网页设计的列表中每个元素后的 CSS 间距
我正在网站上生成元素符号列表(通过使用 jquery 自动完成功能)和我在网站中使用响应式网页设计。我想在每个列表项后留一个空格。为此，我添加了以下 CSS: li { margin-b
值为空时的 HTML 间距
我在格式化我的 HTML 页面时遇到困难。正如您从源代码中看到的那样，它是一个表格，其中每一行都包含由我的网络应用程序动态填充的格式化记录列表。如果其中一列有空值，我想保留行的格式，所以我基本上应该
css - 列表设计中的奇怪填充/间距
我一直致力于设计一个具有三个链接的跨移动设备宽度的设计。我不明白为什么我不能得到正确的间距。什么看起来不对劲？设计如下: 下面是编码版本的样子: 这是我的 CSS: .b-nav-Wrapper {
python - 通过许多子图改善子图大小/间距
我需要在 matplotlib 中生成一大堆垂直堆叠的图。结果将使用 savefig 保存并在网页上查看，所以我不在乎最终图像有多高，只要子图间隔开，这样它们就不会重叠。无论我允许这个数字有多大，子
python - 使用许多子图改进子图大小/间距
我需要在 matplotlib 中生成一大堆垂直堆叠的图。结果将使用 savefig 保存并在网页上查看，所以我不在乎最终图像有多高，只要子图之间有间距，不重叠即可。无论我允许图有多大，子图似乎总是
layout - 节点之间的 BorderPane 间距
是否可以在 BorderPane 上设置节点之间的间距？ ? Swing 等效项将是 BorderLayout 上的 hgap 和 vgap . 我在文档中没有找到任何内容，我能想到的唯一可行的解
iOS 捏合手势控制堆栈 View 间距
我有一个基于日历的应用我希望用户能够通过捏合来放大和缩小日历。这是我的代码: let p = UIPinchGestureRecognizer(target: self, action: #sele
java - Android LinearLayout 间距
我在为 Android 编写一段代码时遇到问题。我使用的是eclipse开发环境。我想要完成的是将一周中的日子均匀地分布在表格的第一行(有六行)。我不知道如何才能使这些单词真正散开，而不是仅仅粘在一起
iOS 捏合手势控制堆栈 View 间距
我有一个基于日历的应用我希望用户能够通过捏合来放大和缩小日历。这是我的代码: let p = UIPinchGestureRecognizer(target: self, action: #sele
python - python 3中的对齐、间距
我该怎么做才能对齐此代码中的所有列？这是正确的还是......？ import urllib.request from re import findall def determinarLlegadas
java - 垂直对齐 BoxLayout 间距？
当使用垂直对齐的 BoxLayout 时，如何阻止组件随着包含的 JFrame 的增长而扩展，从而在底部留下额外的空间？我尝试了不同的布局，但很快就变得一团糟。我还尝试在面板底部添加胶水，但布局管理器
C++ 使用 TABS 间距
我正在尝试制作 cout #include int main() { std::cout << setw(4) << 1 << setw(4) << 2 << std::endl; } 输出
Android Tab 间距/填充选项
使用示例 http://developer.android.com/guide/tutorials/views/hello-tabwidget.html通过向布局添加 HorizontalScro

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 等间距排列div