CSS格式化换行符

Question

当我有以下代码时：

.kitty {
    height: 20vw;
    width: 20vw;
}

    <div class="container-fluid">
      <div class="row">
        <div class="content col-lg-12">
          <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png"         alt="foo" class="kitty">
              textextext <br> textextext
          <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png"  alt="foo" class="kitty"> 
        </div>
      </div>
    </div>

我想要的是文本是<br>元素适用于文本但图像仍然在一行中。像这样：

为了达到这个目的，我必须使用哪种HTML或CSS？

Answer 1

有一些不必要的元素。我删除了那些并使你的标记更简单。

int main(int argc, char **argv)
{
    readline(CYELLOW "simple string" RESET);
    return 0;
}

.kitty {
    height: 20vw;
    width: 20vw;
}
.kitty-text {
    display: inline-block;
}

Answer 2

您可以简单地使用flex，不必须更改标记：

.kitty {
  height: 20vw;
  width: 20vw;
}
.content {
  display:flex;
  /* For vertical & horizontal alignment */
  justify-content:space-around;
  align-items:center;
  /* */
}

<div class="container-fluid">
  <div class="row">
    <div class="content col-lg-12">
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty"> textextext <br> textextext
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty">
    </div>
  </div>
</div>

似乎你正在使用Bootstrap，所以如果它是V4，你会发现我添加的CSS的现成类，因为这个版本也依赖于flex。

.kitty {
  height: 20vw;
  width: 20vw;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="content col d-flex justify-content-around align-items-center">
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty"> textextext <br> textextext
      <img src="https://lorempixel.com/100/100/" alt="foo" class="kitty">
    </div>
  </div>
</div>

Answer 3

然后您需要将所有文本放在一个span元素中，并将其显示为inline-block，如下所示：

.kitty {
  height: 20vw;
  width: 20vw;
}

.content span {
  display: inline-block;
}

<div class="container-fluid">
  <div class="row">
    <div class="content col-lg-12">
      <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png" alt="foo" class="kitty">
      <span>textextext <br> textextext</span>
      <img src="http://www.downesvets.co.uk/wp-content/uploads/2015/07/kitten-package1.png" alt="foo" class="kitty">
    </div>
  </div>
</div>

注意：我使用了.content span选择器，但如果您有其他span元素.content，则可能必须使用其他选择器（可能会为span提供一个类） 1}}孩子在同一页面上并且不希望他们表现相同。