HTML/CSS 表格显示布局

Question

我想按如下方式布局我的网页标题

Image1 (30%)   |  Image2 (centered, 30%)   |   Some multiline texts (40%)

我能够使用 html <table>标记以获取我想要的内容:

<table style="width:100%;">
  <tr style="width:100%;">
    <td style="width:30%; text-align:left;"><img src="logo1.png"></td>
    <td style="width:30%; text-align:center;"><img src="logo2.jpg"></td>
    <td style="width:40%; text-align:center;"><p>
      A multiline paragraph<br>
      that is placed on the right<br>
      and has its texts centered.
    </p></td>
  </tr>
</table>

但我知道 <table>标签用于定义表格数据，而不是像这样的布局工作。我想知道在不使用 HTML 的情况下获得与上面相同的布局的“意识形态”方式是什么 <table> , 但也许 CSS display-table ？

非常感谢!

---

我试过的东西不起作用:

(1) 使用<div> :

<header>
  <div style="width:30%; text-align:left;"><img src="logo1.png"></div>
  <div style="width:30%; text-align:center;"><img src="logo2.jpg"></div>
  <div style="width:40%; text-align:center;"><p>
    A multiline paragraph<br>
    that is placed on the right<br>
    and has its texts centered.
  </p></div>
</header>

(2) 使用<span> (相当于 <div style="display:inline;"> )

<header>
  <span style="width:30%; text-align:left;"><img src="logo1.png"></span>
  <span style="width:30%; text-align:center;"><img src="logo2.jpg"></span>
  <span style="width:40%; text-align:center;"><p>
    A multiline paragraph<br>
    that is placed on the right<br>
    and has its texts centered.
  </p></span>
</header>

Answer 1

使用 div 并应用 display: table-cell。

See example (fiddle)