如何使一个元素被填充以设置另一个元素's、 除此之外，html中溢出时文本可见

how to make an element padded to set the other element's, besides it, text visible completley on overflow in html

本文关键字：元素 html 除此之外 文本 溢出 填充 何使一 设置 另一个      更新时间：2023-09-26

我使用了float，并使3个div浮动，左、右和居中。左一个和右一个都有图像，其中作为中心的一个有文本。但是，当中心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>

我在中没有任何固定标签：如何使网页上的一个元素相对于另一个元素固定？

那里的解决方案是固定中心，并制作相对于中心标签的左右标签。我不想修理任何标签。

尝试使用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>
相关文章：