Question

如何使文字落在图像下方。我知道，如果您使用dispaly：inline-block，则可以使用float：left或float：right。但是我对使用flexbox还是陌生的，那里有人对此有更多的了解，可以帮助我解决这个问题。

big-row {
  display: flex;
  margin-top: 20px;
}

.head-text {
  font-size: 1.5em;
  line-height: 29px;
}

.p-text {
  font-size: 1.25em;
  line-height: 29px;
  margin: 2px;
}

.big-text {
  text-align: left;
  justify-content: flex-start;
  margin-right: auto;
  padding-left: 40px;
  width: 50%;
  color: #888;
}

.big-img {
  padding-right: 50px;
  justify-content: flex-end;
  opacity: 0.8;
}

.big-img img {
  border-radius: 20px;
}

<div class="big-row">
  <div class="wow fadeInLeft big-text">
    <h1 class="head-text"> Alla tjänster </h1>
    <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet luctus nunc, sed ornare velit accumsan id. Cras sit amet justo et velit bibendum elementum ac vel odio. Fusce tortor risus, rhoncus in ultricies ut, rutrum id leo. Pellentesque
      sed venenatis ipsum. Quisque at lacus eu tortor vehicula vestibulum. Aliquam scelerisque tempor elit eu venenatis. In convallis diam quis varius blandit. Vestibulum consectetur ullamcorper urna vel sagittis. Sed malesuada tortor metus, ut porttitor
      odio tristique vel.</p>
  </div>
  <div class="wow pulse big-img">
    <img src="/assets/image/hejhopp.jpg">
  </div>
</div>

Answer 1

您可以使用以下代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="big-row">
<div class="container">
<div class="row">
<div class="col-md-12">
 <div class="wow pulse big-img">
    <img src="asset.PNG">
  </div>
  </div>
  <div class="col-md-12">
  <div class="wow fadeInLeft big-text">
    <h1 class="head-text"> Alla tjänster </h1>
    <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet luctus nunc, sed ornare velit accumsan id. Cras sit amet justo et velit bibendum elementum ac vel odio. Fusce tortor risus, rhoncus in ultricies ut, rutrum id leo. Pellentesque
      sed venenatis ipsum. Quisque at lacus eu tortor vehicula vestibulum. Aliquam scelerisque tempor elit eu venenatis. In convallis diam quis varius blandit. Vestibulum consectetur ullamcorper urna vel sagittis. Sed malesuada tortor metus, ut porttitor
      odio tristique vel.</p>
  </div></div>
 </div></div>
</div>
</body>
</html>

Answer 2

您将图像容器放在DOM中的文本容器之前，并赋予它float: right：

.big-row {
  margin-top: 20px;
  line-height: 29px;
}
.big-row, .big-row  > * {
  box-sizing: border-box;
}

.head-text {
  font-size: 1.5em;
}

.p-text {
  font-size: 1.25em;
  line-height: 29px;
  margin: 2px;
}

.big-text {
  padding-left: 40px;
  width: calc(100% - 40px);
  color: #888;
  text-align: justify;
}

.big-img {
  padding-right: 50px;
  width: calc(50% + 80px);
  padding: 0 40px;
  float: right;
  opacity: 0.8;
}

.big-img img {
  border-radius: 20px;
  width: 100%;
  height: auto;
}

<div class="big-row">
  <div class="wow pulse big-img">
    <img src="http://via.placeholder.com/640x360">
  </div>
  <div class="wow fadeInLeft big-text">
    <h1 class="head-text"> Alla tjänster </h1>
    <p class="p-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet luctus nunc, sed ornare velit accumsan id. Cras sit amet justo et velit bibendum elementum ac vel odio. Fusce tortor risus, rhoncus in ultricies ut, rutrum id leo. Pellentesque
      sed venenatis ipsum. Quisque at lacus eu tortor vehicula vestibulum. Aliquam scelerisque tempor elit eu venenatis. In convallis diam quis varius blandit. Vestibulum consectetur ullamcorper urna vel sagittis. Sed malesuada tortor metus, ut porttitor
      odio tristique vel.</p>
  </div>

</div>

请注意，使用flexbox无法获得此效果。浮动是CSS Box Model Module的一部分。

使用flexbox时，如何使文本位于图像下方？

2 个答案: