时间戳

首页 > 解决方案 > 如何在图像旁边正确放置几行文本并正确缩进

html - 如何在图像旁边正确放置几行文本并正确缩进

问题描述

所以，我刚刚开始学习 HTML 和 CSS，并且正在从事一个私人项目。我想要实现的是：https ://imgur.com/a/kg1rE9U

我挣扎的是第一个蓝色“盒子”。更准确地说，我只是不知道如何像上图那样正确格式化它（到框边界的距离，图像和 text2 / text 3 之间的距离，...）。不仅我的代码没有按预期工作（例如 text2 和 text3 之间的距离太大），我还觉得我做的比实际更复杂。

到目前为止的 HTML 代码是

<div class="standardfield", style="width: 100%;">
                        <p class ="standardfield", style="float:left;">
                            <span style="display:block; height: 20px;"></span>
                            <img src="image.png">
                        </p>
                        <p class ="standardfield", style="font-size: 40px; text-indent:20px;">
                            <span style="display:block; height: 20px;"></span>
                            <b>text2</b>
                        </p>
                        <div class="standardfield", style="font-size:20px; text-indent: 20px;"> 
                            text3 
                        </div>

而 CSS 是

.standardfield {
            text-align:left;
            background-color: #D0DEED;
            color: #548DD1;
            }

标签： htmlcss

解决方案

你应该使用display:flex.

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.bluebox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
  background-color: #D0DEED;
  color: #548DD1;
  padding: 10px;
  margin: 10px;
}

.text {
  padding-left: 10px;
  text-align: left;
}
<div class="wrapper">
  <div class="bluebox">
    <img src="https://www.gravatar.com/avatar/8679b0fa062922b9826d58315e6f0324?s=64&d=identicon&r=PG&f=1">
    <div class="text">
      <p><strong>text2</strong></p>
      <p>text3</p>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="bluebox">
    <img src="https://www.gravatar.com/avatar/8679b0fa062922b9826d25315e6f0324?s=64&d=identicon&r=PG&f=1">
    <div class="text">
      <p><strong>text2</strong></p>
      <p>text3</p>
    </div>
  </div>
  <div class="bluebox">
    <img src="https://www.gravatar.com/avatar/8679b0fa062955b9826d25315e6f0324?s=64&d=identicon&r=PG">
    <div class="text">
      <p><strong>some more text</strong></p>
      <p>text1</p>
      <p>text2</p>
      <p>text3</p>
    </div>
  </div>
</div>

推荐阅读