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

标签 html css twitter-bootstrap flexbox

我试图让一个 p 标签在 h4 下对齐并稍微缩进，但它不会移动到下面，即使在添加像 float:left; 这样的 css 属性之后也是如此。或 text-align:left; 下图显示了发生的情况 image showing what is happening 测试漂浮在 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/

上一篇：html - 何时在 html/css 中使用 id 和 class

下一篇：css - 无论文本长度如何，如何在移动设备上对称对齐 li 标签？

相关文章：

html - 如何将缩略图照片添加到 ruby​​ on rails 中的页眉？

html - Bootstrap 调整大小网页图像超出列

css - 行从超大屏幕中出来

html - 检查元素中样式左侧的绿色垂直线是什么意思？

css - 如何创建网格/平铺 View ？

php - 在更改其位置的 div 框中包含 php

css - 右边有图像的流体宽度 div

javascript - 如何使用 css 或 js 根据 vue.js 中的条件在打印页面中设置不显示？

html - div : Setting margin-top to p tag pushes parent div down too 内的 P 标签

html - 具有相同宽度的两个元素显示的宽度不同

©2024 IT工具网  联系我们