html - 如何在 flex 显示中使文本直接对齐在 h4 下？-6ren

html - 如何在 flex 显示中使文本直接对齐在 h4 下？

转载作者：行者123 更新时间：2023-11-28 16:26:48

我试图让一个 p 标签在 h4 下对齐并稍微缩进，但它不会移动到下面，即使在添加像 float:left; 这样的 css 属性之后也是如此。或 text-align:left; 下图显示了发生的情况测试漂浮在 FreeCodeCamp 之上，但我需要它在它之下。下面是我的代码片段，您可以运行它。

.navbar-custom {
  background: #2C3E50;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
}
.navbar-custom .navbar-brand {
  color: white;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
  color: white;
}
.navbar-custom .navbar-nav {
  letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
  color: white;
}
.navbar-custom .navbar-nav li a:hover {
  color: #18BC9C;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
  color: white;
}
.navbar-custom .navbar-nav li.active a {
  color: white;
  background: #18BC9C;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
  color: white;
  background: #18BC9C;
}
.navbar-custom .navbar-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #18BC9C;
  color: white;
  border-color: #18BC9C;
}
@media (min-width: 768px) {
  .navbar-custom {
    padding: 25px 0;
    -webkit-transition: padding 0.3s;
    -moz-transition: padding 0.3s;
    transition: padding 0.3s;
  }
  .navbar-custom .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .navbar-custom.affix {
    padding: 10px 0;
  }
  .navbar-custom.affix .navbar-brand {
    font-size: 1.5em;
  }
}
#home{
    
      background: url('pexels-photo-38892.jpeg');
 
    height: 100vh;
    background-size: cover;
    
    
    
}
 #home:after{
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to left, #2c373a,  #313d41);
    background-image: -webkit-linear-gradient(to left, #2c373a, #313d41);
	opacity: .6; 
  }
h1 {
    font-weight: 500;
}
/* Typer styles */
.type-wrapper {
 color:white;
    font-family: Montserrat;
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
    font-size: 4.45em;
    font-weight: 700;
  z-index: 1;

}

#type-space{
    font-size: 1em;
}

@include bp-mob {
    .type-wrapper {
      display: inline-block;
    }
    #type-space {
      font-size: 1em;
    }
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
#learnmore{
     position: absolute; 
   top: 650px; 
   left: 0; 
   width: 100%; 
}
#learnmore a{
    color:rgba(255,255,255,0.7);
    text-decoration: none;
      -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;

  transition:.5s;
}
#learnmore a:hover{
    color:white;
}

#about-me-header {
    font-family: Montserrat;
    font-weight: 500;
}



#about-hr {
    border:none;
       margin-bottom:5px !important; 
       margin-top:5px !important;
    width:15%;
    float:center;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
    height: 10px;
	
}

#about-img {
        margin-right: 50px;
      border-radius: 50%;
      width: 30%;
    float: left;
    
}
#about-text{
  font-family: Montserrat;

}



#about-items {
        display:flex;
    align-items:center;
}

.button {
    background-color: transparent;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border: 1px solid;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    padding: 10px 30px 8px;
    font-size: 16px;
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
    letter-spacing: 0.2rem;
    line-height: 1;
    text-transform: uppercase;
}
.button:hover{
    text-decoration: none;
    cursor: pointer;
    color: #000;
}

.button-neutral{
    color: #000;
    border-color: #000;
}
.button-neutral:hover{
    color: #fff;
    background-color: #000;
}




@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
@import "http://fonts.googleapis.com/css?family=Roboto:400,500";
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #4466e4; vertical-align: middle; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; }

.box .space { height: 30px; }

#edu-img{
    float: left;
    width: 65px; 
    height: 65px;
    
}
#edu-text{
        float: left;

}
#left {
    text-align:left;
    float:left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
         <div class="row">
    <div class="col-xs-6 col-sm-6 col-lg-6">
			<div class="box">							
				<div class="icon">
					<div class="image"><i class="fa fa-graduation-cap"></i></div>
					<div class="info">
						<h3 class="title">Education</h3>
						<div style="display:flex;">
                        <img src="https://raw.githubusercontent.com/freeCodeCamp/assets/master/assets/logos/fcc_puckRoundedCorners600.png" alt="free code camp logo" id="edu-img">
                            <h4>Free Code Camp </h4>
                             <p id="left">test</p>
                        </div>
                        
				<div id="about-items">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Shaw_Academy_Logo_HD.png/220px-Shaw_Academy_Logo_HD.png" alt="shaw academy logo" id="edu-img">
                        <h4>Shaw Academy</h4>
                        </div>
					</div>
				</div>
    </div>
             </div>
             <div class="col-xs-6 col-sm-6 col-lg-6">
			<div class="box">							
				<div class="icon">
					<div class="image"><i class="fa fa-check"></i></div>
					<div class="info">
						<h3 class="title">Other Things I've done</h3>
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
						</p>
						
					</div>
				</div>
    </div>
             </div>
        </div>
</div>

最佳答案

h4 和 p 不应该是 flex-child，因为 flex-direction 默认是 row，你可以将它们包装在一起以正常运行:

例子:

.navbar-custom {
  background: #2C3E50;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
}

.navbar-custom .navbar-brand {
  color: white;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
  color: white;
}

.navbar-custom .navbar-nav {
  letter-spacing: 1px;
}

.navbar-custom .navbar-nav li a {
  color: white;
}

.navbar-custom .navbar-nav li a:hover {
  color: #18BC9C;
}

.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
  color: white;
}

.navbar-custom .navbar-nav li.active a {
  color: white;
  background: #18BC9C;
}

.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
  color: white;
  background: #18BC9C;
}

.navbar-custom .navbar-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-color: white;
}

.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #18BC9C;
  color: white;
  border-color: #18BC9C;
}

@media (min-width: 768px) {
  .navbar-custom {
    padding: 25px 0;
    -webkit-transition: padding 0.3s;
    -moz-transition: padding 0.3s;
    transition: padding 0.3s;
  }
  .navbar-custom .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .navbar-custom.affix {
    padding: 10px 0;
  }
  .navbar-custom.affix .navbar-brand {
    font-size: 1.5em;
  }
}

#home {
  background: url('pexels-photo-38892.jpeg');
  height: 100vh;
  background-size: cover;
}

#home:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to left, #2c373a, #313d41);
  background-image: -webkit-linear-gradient(to left, #2c373a, #313d41);
  opacity: .6;
}

h1 {
  font-weight: 500;
}


/* Typer styles */

.type-wrapper {
  color: white;
  font-family: Montserrat;
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  font-size: 4.45em;
  font-weight: 700;
  z-index: 1;
}

#type-space {
  font-size: 1em;
}

@include bp-mob {
  .type-wrapper {
    display: inline-block;
  }
  #type-space {
    font-size: 1em;
  }
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#learnmore {
  position: absolute;
  top: 650px;
  left: 0;
  width: 100%;
}

#learnmore a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

#learnmore a:hover {
  color: white;
}

#about-me-header {
  font-family: Montserrat;
  font-weight: 500;
}

#about-hr {
  border: none;
  margin-bottom: 5px !important;
  margin-top: 5px !important;
  width: 15%;
  float: center;
  box-shadow: 0 10px 10px -10px #8c8b8b inset;
  height: 10px;
}

#about-img {
  margin-right: 50px;
  border-radius: 50%;
  width: 30%;
  float: left;
}

#about-text {
  font-family: Montserrat;
}

#about-items {
  display: flex;
  align-items: center;
  /* eventually: justify-content:space-around/center/space-between;
*/}

.button {
  background-color: transparent;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: 1px solid;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  padding: 10px 30px 8px;
  font-size: 16px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 300;
  letter-spacing: 0.2rem;
  line-height: 1;
  text-transform: uppercase;
}

.button:hover {
  text-decoration: none;
  cursor: pointer;
  color: #000;
}

.button-neutral {
  color: #000;
  border-color: #000;
}

.button-neutral:hover {
  color: #fff;
  background-color: #000;
}

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
@import "http://fonts.googleapis.com/css?family=Roboto:400,500";
.box>.icon {
  text-align: center;
  position: relative;
}

.box>.icon>.image {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 88px;
  height: 88px;
  border: 8px solid white;
  line-height: 88px;
  border-radius: 50%;
  background: #4466e4;
  vertical-align: middle;
}

.box>.icon>.image>i {
  font-size: 36px !important;
  color: #fff !important;
}

.box>.icon>.info {
  margin-top: -24px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid #e0e0e0;
  padding: 15px 0 10px 0;
}

.box>.icon>.info>h3.title {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px;
  color: #222;
  font-weight: 500;
}

.box .space {
  height: 30px;
}

#edu-img {
  float: left;
  width: 65px;
  height: 65px;
}

#edu-text {
  float: left;
}

#left {
  text-align: left;
  float: left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-lg-6">
      <div class="box">
        <div class="icon">
          <div class="image"><i class="fa fa-graduation-cap"></i></div>
          <div class="info">
            <h3 class="title">Education</h3>
            <div style="display:flex;">
              <img src="https://raw.githubusercontent.com/freeCodeCamp/assets/master/assets/logos/fcc_puckRoundedCorners600.png" alt="free code camp logo" id="edu-img">
              <div style="margin:auto;">
                <h4>Free Code Camp </h4>
                <p id="left">test</p>
              </div>
            </div>

            <div id="about-items">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Shaw_Academy_Logo_HD.png/220px-Shaw_Academy_Logo_HD.png" alt="shaw academy logo" id="edu-img">
              <h4>Shaw Academy</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-lg-6">
      <div class="box">
        <div class="icon">
          <div class="image"><i class="fa fa-check"></i></div>
          <div class="info">
            <h3 class="title">Other Things I've done</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
            </p>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

flex-direction:column 可以应用，但需要固定的 height 并允许换行。将 h4 和 p 包装在一起的常规 block 行为在我看来会很好

关于html - 如何在 flex 显示中使文本直接对齐在 h4 下？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43437007/

文章推荐： javascript - 我应该在模型还是商店中指定代理？

文章推荐： php - 如何在 PHP echo 中调用 javascript 函数/编写脚本

文章推荐： html - 何时在 html/css 中使用 id 和 class

dart - ShadowDom外部的父级的属性已更改(显示:无->显示:flex->显示:无)
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。我的组件内部有一个可滚动区域，用于显示日志消息。 (id =“message-li
phpinfo() 显示 MySQL，PMA 显示 MariaDB
我真的很困惑有一个 phpinfo() 输出: MySQL 支持启用客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
jquery - 在 jquery 切换中单击时更改按钮文本(显示/隐藏/显示)
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化，我尝试使用以下代码: 但是，它不起作用。我应该如何实现这个？任何帮助都会很棒
php - cakephp 显示 ID 显示 table.name 来自两个不同表的关系
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID，当看到数据时显示狗和猫的名字。我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
php - 使用 Blade 显示 HTML 显示 HTML 代码
我有一个字符串返回到我的 View 之一，如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是，输出是原始字符串而不是渲染
jquery - 使用 JQuery 显示/隐藏隐藏/显示 div，但单击按钮没有效果
我无法让我的链接(由图像表示，位于页面左侧)真正有效地显示一个 div(包含一个句子，位于中间)/单击链接时隐藏。这是我的代码: Practice
javascript - 显示 image1 的脚本，然后(随机毫秒)显示 image2 并停止
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
c# - ListView 显示 4 条记录。 DataGridView 显示 3 条记录？
最初我使用 Listview 来显示 oracle 结果，但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而，自从切换到数据网格后，我得到的结果越来越
xml - 如何使用 Apache fop 显示 Unicode 字符？显示 "?"而不是字符。
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽，所以它显示在 Apache FOP 生成的 PDF 中。这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input，您
node.js - pm2 显示 1.2GB 而 heapdump 显示 80MB
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。我的应用程序似乎有内存泄漏，因为它从我启动时的大约 1
jquery - 如果 x 显示 x 如果 y 显示 y(我知道这个标题不好)
好的，所以我有一些 jQuery 代码，如果从下拉菜单中选择了带有前缀 Blue 的项目，它会显示一个输入框。代码: $(function() { $('#text1').hide();
google-chrome - Chrome 中的“检查元素”显示 LESS，但 Firefox 显示 CSS
当我试图检查 Chrome 中的 html 元素时，它显示的是 LESS 文件，而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
python - Microsoft Bot Emulator 显示 "sending failed. Retry"。 VSCode 显示 KeyError : 'HTTP_CONTEXT_TYPE'
我是 Microsoft Bot Framework 的新手，我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
encoding - notepad++ 显示 ucs-2LE 而 ubuntu FILE [file] 显示 UTF-16LE，我很困惑？
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
javascript帮助日期/显示
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jQuery点击关闭div(显示)
我正在尝试执行单击以打开/关闭一个 div 的功能。这是基本的，但是，点击只显示 div，当我点击“关闭”时，没有任何反应。 $(".inscricao-email").click(function
flutter - 显示/隐藏小部件而不重新创建它
假设我有 2 张卡片，屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据，卡 2 上有一些数据，我不想破坏它们每个上的数据，或者我不想再次重建它们中的任何一个。
javascript - 显示()未定义
我正在使用 Eloquent Javascript 学习 Javascript。我在 Firefox 控制台上编写了以下代码，但它返回:“ReferenceError:show() 未定义”为什么？
symfony - 显示/隐藏某些菜单取决于奏鸣曲管理员角色
我正在使用 Symfony2 开发一个 web 项目，我使用 Sonata Admin 作为管理面板，一切正常，但我想要做的是，在 Sonata Admin 的仪表板菜单上，我需要显示隐藏一些菜单取决
angularjs - 显示/隐藏div取决于AngularJS中的下拉列表选择
我试图显示一个div，具体取决于从下拉列表中选择的内容。例如，如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本，但样本不完整，需要接线 http://j

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在 flex 显示中使文本直接对齐在 h4 下？