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

Question

我正在尝试使ap标签在h4下对齐，并稍有缩进，但是即使添加了诸如float:left; or text-align:left;类的css属性，它也不会在下方移动float:left; or text-align:left; float:left; or 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> 

Answer 1

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行为会很好