个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有几个问题要解决，那就是1- 为什么 Logo 类属性不起作用？2- 为什么类(class)标题没有向右移动，即 justify-content: flex-end 不工作或者还有什么其他方法可以做到这一点？3- 我必须写 display: flex;在所有父类或简单的容器中，其中包含所有父类就足够了吗？4- 如果我使用 display: flex 会有什么影响；在所有父类上？非常感谢
---HTML---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width=device-width", initial-scale = 1.0>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="port.css">
</head>
<body>
<div class="container">
<div class="header">
<div id="logo"> Logo </div>
<div class="title">JAMES O BRAIN
<div class="sub-title">FRONT-END MONK</div> </div>
</div>
<div class="container2">
<div class="centre-picture">Central Pic</div>
<div class="left-boxs">
<div class="blue-box">Blue Box</div>
<div class="grey-box">Grey Box</div>
<div class="green-box">Green Box</div>
</div>
</div>
<div class="bottom-boxs">
<div class="featured-work">Featured Work</div>
<div class="appify">APPIFY</div>
<div class="sunflower">SUNFLOWER</div>
<div class="bokeh">BOKEH</div>
</div>
</div>
</body>
</html>
---CSS---
.container {
display: flex;
flex-direction: column;
border: 5px solid black;
margin: 10px;
padding: 50px;
}
.header {
display: flex;
border: 5px solid green;
}
.logo {
/* why these all properties not working at all ? */
border: 3px solid black;
padding: 10px;
margin: 10px;
}
.title {
border: 3px solid orange;
justify-content: flex-end; /* why this property not working, how can i get this to right ?*/
padding: 10px;
margin: 10px;
}
.sub-title {
border: 3px solid black;
padding: 5px;
margin: 5px
}
.container2 {
display: flex;
border: 5px solid red;
margin: 10px;
padding: 10px;
height: 300px;
}
.centre-picture {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.left-boxs {
border: 3px solid goldenrod;
margin: 10px;
padding: 10px;
order: -1;
}
.green-box {
background-color: green;
padding: 5px;
margin: 5px
}
.blue-box {
background-color: blue;
padding: 5px;
margin: 5px
}
.grey-box {
background-color: grey;
padding: 5px;
margin: 5px
}
.bottom-boxs {
display: flex;
border: 5px solid blue;
}
.appify {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.sunflower {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
.bokeh {
border: 3px solid black;
margin: 10px;
padding: 10px;
}
最佳答案
正如 Daniel 所说，您应该确保您没有混淆标记/CSS 中的 #id 和 .class 选择器。在您的样式表中，您应该使用 #logo 而不是 .logo。
您可以通过多种方式对齐页眉中的元素。在下面的示例中，我将 justify-content: space-between; 附加到 .header div，这将使任何直接子元素与它们之间的剩余空间对齐.还有其他方法可以做到这一点……这只是一种选择。您可以尝试调整边距、填充和其他 flexbox 值，看看什么最适合您。
给容器 display: flex 将影响容器内的所有子元素，但不每个子元素中的内容。例如:如果你有一个包含三个 div 元素的容器，你给容器 display: flex; justify-content: center; 这将使每个 div 水平居中，但不是每个 div 中的文本、图像等.在你的情况下，至少在这个例子中，是的，你需要添加 display: flex; 到标题内的每个 div，以便将 flexbox 属性应用于里面的文本。
希望对您有所帮助。有关示例，请参见下面的代码片段。祝你好运!
.container {
display: flex;
flex-direction: column;
border: 5px solid black;
width: 80%;
padding: 50px;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border: 5px solid green;
padding: 10px;
}
#logo {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid black;
padding: 10px;
}
.title {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid orange;
padding-left: 10px;
}
.sub-title {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
border: 3px solid black
}<div class="container">
<div class="header">
<div id="logo">Logo</div>
<div class="title">JAMES O BRAIN
<div class="sub-title">
FRONT-END MONK
</div>
</div>
</div>
</div> 关于html - 遇到 flexbox 属性问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50327384/
24
4
0
我对 c# 有点陌生，我在尝试围绕这个 if-then 语句尝试实现时遇到了一些麻烦。 这是我的目标:当用户将订单输入系统时，将为每个订单创建一个唯一的 orderID。但是，一些附加功能是用户可以选
我已经搜索了这个特定的错误，发现根本问题涉及循环计数错误并导致程序超出数组的界限。 但是，当我将每个数组降低到数组开始丢失输出数据的程度后，它继续抛出相同的错误。我对 C/C++ 仍然是新手，但任何对
我不明白为什么我运行这个小程序时屏幕上没有任何显示？ while 循环甚至开始了吗？ #include #include int main() { char word[20]; char
我接手了一个用 Perl 编写的项目，它有一些依赖项，例如 Template::Toolkit , Image::ExifTool , 和 GD仅举几例。目前，这些依赖项使用 --prefix 构建到
我想对一个字段进行累积总和，但只要遇到 0 就重置聚合值。 这是我想要的一个例子: data.frame(campaign = letters[1:4] , date=c("jan","
不久前，该项目的 gradle 构建运行良好，但现在一直失败并显示以下错误(带有 --info 标志的输出): Starting process 'Gradle Test Executor 1'. W
我是编程新手，想用 Java 制作一个掷骰子程序来执行。代码如下: import java.math.*; public class Dices { public static int dice1=0
这个问题已经有答案了: What is a StringIndexOutOfBoundsException? How can I fix it? (1 个回答) 已关闭 5 年前。 我对 Java 完
这个方法一直抛出标题中的异常，我找不到原因，我已经通过连接创建了其他表，并且所有引用的表都已创建。我正在使用嵌入式JavaDB . private void createEvidenceTable()
我刚开始上课，这是我第三次尝试上课。我遇到了一个 NameError，我真的不知道如何解决。看看我的程序，看看你能不能帮忙。 import random import math import pyga
好吧，这是我的困境，我向 JFrame 添加了三个面板。第一个(不可见)第二个(可见)和第三个(不可见)..我使用第一个面板作为菜单，当您选择一个选项时，第一个面板被制作(可见)，然后第三个面板被制作
我的部分代码遇到问题。如果我选择选项 A，它会运行并给我正确的答案，但是，如果我选择选项 S 或 M，它不会给我任何结果，只会去到它应该去的地方。已经尝试将 if 更改为 else if，但它显示“预
我这里有一些代码，但我正在努力解决它，因为我似乎无法掌握这个文件指针的东西。我对使用文件还很陌生。我见过类似的其他问题，并且尝试了对其他人有效的解决方案，但由于某种原因它们对我不起作用。这是出现问题的
我们有一个很大的应用程序，我们已经将 TODO 规则添加到质量门中，如果发现 TODO 注释，它会给出错误。如果我们只是删除 TODO 注释(这很可怕)，它会起作用，但添加 TODO 注释的整个目的就
我正在尝试编写一个名为 isVowel 的函数，它接受一个字符(即长度为 1 的字符串)并在它是元音、大写或小写时返回“true”。如果该字符不是元音字母，该函数应返回“false”。 这看起来应该可
我一直在努力完成我正在做的这个小项目，但由于某种原因它无法正常工作。 问题是当我第一次访问该页面并单击出现在主要部分中的第一个链接时，它会根据需要显示弹出框。现在，当我点击另一天，例如星期天并尝试点击
我正在尝试制作一个 WPF 应用程序。我的窗口内有一个数据网格。我制作了另一个窗口，将新数据添加到我的数据网格中。虽然它按照我想要的方式工作，但我不断遇到异常。我的 MySQL 代码: using S
我试图在我似乎无法使 NSUserDefaults 正常工作的程序中保存几个首选项。如果有人可以查看我的代码并查看是否有任何错误，我们将不胜感激 NSString *kGameIsPaused = @
设置 SymmetricDS版本是3.9.1(也试过3.9.0) 设置是从 postgres 9.5.3 到 postgres 9.5.3 Windows 10 pc(客户端节点)到 Windows
经过长时间的努力，我终于(差不多)完成了我的java菜单程序。但是，我无法让我的返回更改功能在我的代码末尾工作。它给出了非常奇数的数字。有什么想法吗？ 代码: import java.io.*; im
我是一名优秀的程序员,十分优秀！