Question

如何使多行文本（a）与图像（img）内联？

文本的第二行始终位于图像之后。

这是我的代码：

<div class="entry">
  <img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
  <a class="name">Waisie Milliams Hah Waisie Milliams Hah</a>
  <div class="num">0</div>
</div>

<style>
  .entry {
    background-color: rgb(37, 37, 37);
    color: white;
    height: auto;
    margin: 6.9px;
    bottom: 0px;
    box-sizing: border-box;
    left: 0px;
    letter-spacing: 0.3px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: left;
    text-decoration: none solid rgb(0, 0, 0);
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    top: 0px;
    width: 224px;
    column-rule-color: rgb(0, 0, 0);
    perspective-origin: 112px 200.188px;
    transform-origin: 112px 200.188px;
    caret-color: rgb(0, 0, 0);
    border: 0px none rgb(0, 0, 0);
    font-size: 15px;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    min-height: 220px;
  }
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .name {
    vertical-align: middle;
  }
  .num {
    text-align: center; 
    font-size: 112px;
  }
</style>

我尝试弄乱了容器和两个孩子的display属性，但是没有运气。

Answer 1

尝试一下

<div class="entry">
  <div class="wrapper">
     <img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
     <a class="name">Waisie Milliams Hah Waisie Milliams Hah</a>
  </div>
   <div class="num">0</div>
</div>

CSS

.wrapper{
    display: flex;
    align-items: center;
    text-align: center;
}

Answer 2

您可以在不更改HTML结构的情况下使用以下代码，请在以下位置查看演示： DEMO HERE

<div class="entry">
    <img class="icon" src="https://discordapp.com/assets/dd4dbc0016779df1378e7812eabaa04d.png">
    <a class="name">Inline image text will be here and it can be multi-lined</a>
    <div class="num">0</div>
</div>

<style>
.entry {
  background-color: rgb(37, 37, 37);
  color: white;
  max-width: 350px;
  padding: 10px;
}

.entry .icon {
  width: 80px;
  float: left;
  border-radius: 50%;
}

.entry .name {
  margin-left: 100px;
  display:block;
  padding-top: 10px;
}

.num {
  clear: both;
  text-align: center;
  font-size: 100px;
}
<style>

Answer 3

我只更新了您的CSS。这是demo。

 .entry {
    background-color: rgb(37, 37, 37);
    color: white;
    height: auto;
    margin: 6.9px;
    bottom: 0px;
    box-sizing: border-box;
    left: 0px;
    letter-spacing: 0.3px;
    overflow-wrap: break-word;
    position: relative;
    right: 0px;
    text-align: left;
    text-decoration: none solid rgb(0, 0, 0);
    text-rendering: optimizelegibility;
    text-size-adjust: 100%;
    top: 0px;
    width: 224px;
    column-rule-color: rgb(0, 0, 0);
    perspective-origin: 112px 200.188px;
    transform-origin: 112px 200.188px;
    caret-color: rgb(0, 0, 0);
    border: 0px none rgb(0, 0, 0);
    font-size: 15px;
    list-style: none outside none;
    outline: rgb(255, 255, 255) none 0px;
    min-height: 220px;
    display:flex;
    flex-wrap:wrap;
    padding: 10px;
    align-items:center;
  }
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .name {
    vertical-align: middle;
    width: calc(100% - 60px);
    padding-left:10px;
  }
  .num {
    text-align: center; 
    font-size: 112px;
  }

使多行文本与图像内联

4 个答案: