Question

我尝试使用除了它之外的某些文字制作照片，我尝试使用vertical-align=text-top，但文字的下一行会显示在图片下方：

如何将所有文字放在图像旁边，如？

Answer 1

在图片样式中添加var sumaArr = []; for (var u = 0; u < p.getData().length; u++) { $.each(p.getData()[u].data, function (i, el) { sumaArr[i] > 0 ? sumaArr[i] = sumaArr[i] + el[1] : sumaArr[i] = el[1]; }); } var ctx = p.getCanvas().getContext("2d"); var data = p.getData()[p.getData().length - 1].data; var xaxis = p.getXAxes()[0]; var yaxis = p.getYAxes()[0]; var offset = p.getPlotOffset(); ctx.font = "12px 'Segoe UI'"; ctx.fillStyle = "gray"; for (var i = 0; i < data.length; i++) { var text = sumaArr[i]; var metrics = ctx.measureText(text); var xPos = (xaxis.p2c(data[i][0]) + offset.left) - metrics.width / 2; var yPos = yaxis.p2c(sumaArr[i]) + offset.top - 5; ctx.fillText(text, xPos, yPos); }

Answer 2

将图像包装在div中并将其设置为文本（必要时适当包装）到display:inline-block

* {
  margin: 0;
  padding: 0;
}
.parent {
  width: 80%;
  margin: 1em auto;
  padding: 1em;
  border: 1px solid grey;
}
.image {
  display: inline-block;
  vertical-align: top;
}
p {
  display: inline-block;
}

<div class="parent">
  <div class="image">
    <img src="http://www.canvaz.com/portrait/charcoal-1.jpg" style="vertical-align:text-top; width:200px">
  </div>
  <p>

    ALBERT EINSTEIN
    <br>ALBERT EINSTEIN2
    <br>BLABLABLA
    <br>

  </p>
</div>

Answer 3

轻松处理此问题的一种方法是使用flexbox。

＆＃13;

.container {
  display: flex;
  flex-direction: row;
}

.image {
  flex: 0 1 10%;
  margin-right: 2%;
}

.text {
 flex: 1 1 80%;
 margin-left: 2%;
}

＆＃13;

<div class="container">
  <div class="image">
    <img src="http://placehold.it/100x150">
  </div>
  <div classs="text">
    <p>Your text there</p>
    <p> To fill the conatiner</p>
    <p>Or not to fill, your choice</p>
  </div>
</div>

＆＃13;

这会创建一个flex容器。然后为图像和文本提供两个块。为每个容器提供充足的空间。您可能需要玩弄文本布局以根据需要在该块中对齐事物。但是，布局的主要问题已经解决了。

Answer 4

如果您想阻止文字在图片下方，您可以使用<div>，这两个float:left元素，前提是它有足够的空间显示在图片旁边，如果它不适合它，它将显示在图像下面。

<div class="">
  <div style="float:left">
    <img src="http://www.canvaz.com/portrait/charcoal-1.jpg" style="vertical-align:text-top; width:200px;float:left;">
  </div>
<div style="float:left;">
  <p>
    ALBERT EINSTEIN
    <br /> ALBERT EINSTEIN2
    <br /> BLABLABLA
    <br /> ALBERT EINSTEIN
    <br /> ALBERT EINSTEIN2
    <br /> BLABLABLA
    <br /> ALBERT EINSTEIN
    <br /> ALBERT EINSTEIN2
    <br /> BLABLABLA
    <br /> ALBERT EINSTEIN
    <br /> ALBERT EINSTEIN2
    <br /> BLABLABLA
    <br /> ALBERT EINSTEIN
    <br /> ALBERT EINSTEIN2
    <br /> BLABLABLA
    <br /> ALBERT EINSTEIN
    <br /> ALBERT EINSTEIN2
    <br /> BLABLABLA
    <br />
  </p>
</div>

Answer 5

尝试以下列方式使用表格。

<table>
    <tr>
        <td>
            <img src="yourImage" height="150" width="150" />
        </td>
        <td style="padding-left:30px;">
            <div>
                <!-- Rest of your text -->
            </div>
        </td>
    </tr>
</table>

Answer 6

在CSS中有一个名为padding的属性，将您的属性包含在div标记中，然后您可以使用以下内容：

div{padding: 10px 20px 30px 40px }.

这些值分别来自右上角左下角。尝试这些值，你就可以了。

图像旁边的文字

6 个答案: