代码之家 › 专栏 › 技术社区 › Haox

如何用HTML和CSS分隔两个flex块?

flexbox css3 css html javascript

Haox · 技术社区 · 7 年前

我的代码不起作用,我不明白为什么。。。

我用的是flex-box,我是新来的,如果解决方法简单的话,我很抱歉。

谢谢您

@charset "UTF-8";
/* CSS Document */
body {
  margin: 0;
  font-size: 28px;
  background-color: #747474;
}


/* Style the navbar */


#navbar {
  overflow: hidden;
  background: rgba(191, 191, 191 ,0.5);
  display: flex;
  justify-content: flex-end;

}

.test:nth-child(1){
  order: 1;
  align-items: flex-start;
}
.test:nth-child(2){
  order: 4;
}
.test:nth-child(3){
  order: 3;
}
.test:nth-child(4){
  order: 2;
}
.test:nth-child(5){
  order: 5;
}

<!DOCTYPE html>
<html>

    <link rel="stylesheet" href="CSS/style2.css" />
    <link rel="shortcut icon" href="IMAGES/PNG/favicon.png" />

    <head>
        <meta charset="utf-8" />
        <title>Electrophotonique Ingenierie</title>
    </head>


    <body>

        <div class="test2">
            <div id="navbar">
              <div class="test"> <a href= "index2.html">Electrophotonique Ing.</a></div>
              <div class="test"> <a class="active" href="javascript:void(0)">Blog</a></div>
              <div class="test"> <a href="blog">Contact</a></div>
              <div class="test"> <a href="blog">L'Ã©lectrophotonique</a></div>
              <div class="test"> <a href="blog">Qui sommes nous?</a></div>


            </div>

    <div class="content">

    </div>


<script type="text/javascript" src="JS/sticky_navbar.js"></script>


</body>
</html>

1 回复 | 直到 7 年前

enxaneta 7 年前

我不太明白你的问题。这就是你想要达到的目标:

body {
  margin: 0;
  background-color: #747474;
  font-size:12px;
}


/* Style the navbar */


#navbar {
  overflow: hidden;
  background: rgba(191, 191, 191 ,0.5);
  display: flex;
  justify-content: flex-end;

}
.test{padding:.5em 1em;}

.test:nth-child(1){
  order: 1;
  margin:0 auto 0 0;
  
}
.test:nth-child(2){
  order: 4;
}
.test:nth-child(3){
  order: 3;
}
.test:nth-child(4){
  order: 2;
}
.test:nth-child(5){
  order: 5;
}

<div class="test2">
  <div id="navbar">
    <div class="test"> <a href="index2.html">Electrophotonique Ing.</a></div>
    <div class="test"> <a class="active" href="javascript:void(0)">Blog</a></div>
    <div class="test"> <a href="blog">Contact</a></div>
    <div class="test"> <a href="blog">L'Ã©lectrophotonique</a></div>
    <div class="test"> <a href="blog">Qui sommes nous?</a></div>

  </div>

  <div class="content">

  </div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前