javascript - 如何使元素填充以设置其他元素，除此之外，文本在 html 溢出时完全可见

Question

我使用了 float 并使 3 个 div float ，左，右和居中。左一右一有图像，中间一有文字。但是，当中心 div 的文本溢出时，它的文本显示在下面。例如，我已经根据我的笔记本电脑浏览器编写了我的 html 文件。我使用了填充，这样文本就可以恰好位于这两个图像之间。但是当我在我的手机中打开相同的 html 文件时，像素较少，文本显示为 2 行。

现在，我的问题是，无论在哪个设备或浏览器中打开文件，我都想让文本固定在这两个图像之间。我该怎么做？

这是我的代码:

<header>
    <div style="float:left;padding-left:24%">
      <img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
    </div>
    <div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
    <div style="float:center;padding-top:1%">
        <h1>Welcome to AHK Organization</h1>
    </div>
</header>

我没有任何固定标签: How can I make an element on a webpage fixed BUT relative to another element?

那边的解决方案说固定中心，使左右标签相对于中心标签。我不想修复任何标签。

Answer 1

试试这个 fiddle使用 display:inline-block 而不是 float

<header>
    <div style="display:inline-block;width:25%;">
      <img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
    </div>
    <div style="display:inline-block;width:44%;">
        <h1>Welcome to AHK Organization</h1>
    </div>
    <div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>