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 应用程序崩溃

F# 排列
我需要在给定的列表上生成排列。我设法这样做 let rec Permute (final, arr) = if List.length arr > 0 then for x i
Java 排列
我正在尝试运行我的代码，以便它打印循环排列，尽管我目前只能让它执行第一个排列。它正确运行到我标记的点，但我看不出出了什么问题。我认为 while 循环中没有中断，但我不确定。确实需要一些帮助。 pac
JavaScript 排列
我正在尝试计算不包含连续字母的排列数。我的代码通过了像“aabb”(答案:8)和“aab”(答案:2)这样的测试，但没有通过像“abcdefa”这样的情况(我的答案:2520；正确答案:3600)。这
r - 使用条件对字符列进行排序/排列
我正在尝试使用 dplyr 的 arrange 根据条件对字符串进行排序。我想在一列上排列，但如果第二列等于一个值，则按升序排列，如果第二列等于另一个值，则按降序排列。我发现了几个类似的问题(其中一
r - 排列()不识别列名参数
在 R 中，我使用 dplyr更具体地说 arrange() . 不知何故 arrange功能没有按预期工作。在下面的示例中，我首先存储列的名称，然后将此变量作为参数传递给名为“my_functio
qml - GridLayout 排列
以下是我的 main.qml : Window { id: window visible: true width: 800 height: 480 title:
javascript - 找到两个数组的可用组合(排列？)
很难用谷歌搜索这个问题，因为我不确定这些概念叫什么，并且所有“两个数组/组的组合”SO 帖子都没有给我我期望的输出。数组示例: var array1 = ['Bob', 'Tina']; var a
使用两个列表的 Scala 排列
实现以下目标的最佳方法是什么？我有两个列表: val l1 = List("a", "b") val l2 = List(1, 2) 我想生成这个: List ( List(('a', 1)
使用递归的 JavaScript 排列
我知道互联网上有很多针对我的具体问题的解决方案，但我一直在尝试以特定的方式解决它，但它不起作用，我真的无法理解出了什么问题。就我而言，我只想打印排列。这是我的代码: a = "abc"; functi
具有输出列表长度的 Haskell 排列
我有这样的代码来创建排列: --unique permutation perm :: [t] -> [[t]] perm [] = [[]] perm (x:xs) = [(y:zs) | (y,ys
math - 如何高效找到nPr(排列)？
有没有比使用基本公式 n!/(n-r)! 更好的方法？就像我们对 nCr(组合) nCr = (n-l)Cr + (n-1)C(r-1) 一样？最佳答案这样怎么样:nPr = (n−1)Pr +
r - 来自不同集合的混合组合/排列
此问答的动机是 How to build permutation with some conditions in R . 到目前为止，已经有一些很好的 R 软件包，例如 RcppAlgos 和 arr
Erlang 列表理解、排列
我正在修改一本书中的排列示例。以下代码按预期工作。 perms([]) -> [[]]; perms(L) -> [[H|T] || H []; 它返回一个空列表。当我替换时，我得到了这个。
Java 排列 2
大约一周前，我问了一个关于帮助我解决这个问题的问题 Java permutations ，打印排列方法有问题。我已经整理了我的代码，并有一个现在可以工作的工作示例，尽管如果 5 位于数组中的第五个位置
python - 如何计算具有重复元素的列表的排列(排列)
我有一个包含重复元素的列表，即orig = [1,1,1,2,2,3]。我想创建一个derangement b = f(orig)，使得 b 中的每个位置值都与 orig 中的值不同: b[i] !
具有最少随机数的 Java 排列
我想生成一个 array a 的排列而且我不想使用实用功能，例如 java.util.Collections() . 排列应该是随机的，并且每个排列都应该有可能发生 - 但不需要均等分布的概率。以下
java - 排列、递归
我有一个作业:用户输入一个字符串，例如 ABCD，程序必须给出所有排列。我不希望整个代码只是一个提示。这是我到目前为止在他们那里得到的，我没有得到任何实现。以ABCD为例: 在本例中获取字符串长度的
Python Itertools 排列
我目前正在编写一个使用 itertools 的程序，其中的一部分似乎无法正常运行。我希望确定排列函数输出列表长度的输入等于它生成输出的列表长度。换句话说，我有 import itertools b =
python - Itertools 排列
我有一个列表 x=[1,2,3,4,5] 并且想查看这个列表的不同排列，一次取两个数字。 x=[1,2,3,4,5] from itertools import permutations y=list
python - 跨组无重复的组合/排列
我正在寻找 C 或 Python 代码来实现两个伪代码函数之一: function 1: list1 = [0,1,2] #any list of single-integer elements li

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 等间距排列div