我之前就导航菜单问过这个问题。我收到的答案帮助我解决了这个问题(我不得不将px更改为%)
但是,将此修复程序应用于页面上的表时,它们不会被切断,但是当我调整浏览器大小时它们会重叠。

HTML:

<div class="Table">
        <object id="column1R">Born</object>
        <object id="column2R">Died</object>
        <object id="column3R">Spouse(s)</object>
        <object id="column4R">Occupation</object>

        <object id="answer1R">February 4, 1913</object>
        <object id="answer2R">October 24, 2005</object>
        <object id="answer3R">Raymond Parks</object>
        <object id="answer4R">Civil rights activist</object>
    </div>


CSS:

    #column1R {
    font-family: "Bree Serif", "serif";
    color: white;
    font-size: 28px;
    margin-top: 124px;
    margin-right: 23%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    text-align: center;
    width: 75px;
    float: right;

}

#answer1R {
    font-family: "serif";
    color: white;
    float: right;
    font-size: 28px;
    margin-top: 124px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 8px;
    height: 0px auto;
    min-height: 38px;
    width: 200px;
    text-align: center;
}

#column2R {
    font-family: "Bree Serif", "serif";
    color: white;
    font-size: 28px;
    margin-top: 172px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer2R {
    font-family: "serif";
    color: white;
    float: right;
    font-size: 28px;
    margin-top: 172px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 8px;
    height: 0px auto;
    min-height: 38px;
    width: 200px;
    text-align: center;
    font-size: 27px;
}

#column3R {
    font-family: "Bree Serif", "serif";
    color: white;
    font-size: 18px;
    margin-top: 220px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer3R {
    font-family: "serif";
    color: white;
    font-size: 18px;
    margin-top: 220px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 7px;
    height: 0px auto;
    min-height: 25px;
    width: 200px;
    text-align: center;
    float: right;
}

#column4R {
    font-family: "Bree Serif", "serif";
    color: white;
    font-size: 15px;
    margin-top: 254px;
    margin-right: -6.8%;
    position: relative;
    border: 2px solid white;
    padding: 4px;
    width: 75px;
    text-align: center;
    float: right;

}

#answer4R {
    font-family: "serif";
    color: white;
    font-size: 18px;
    margin-top: 254px;
    margin-right: -22.6%;
    position: relative;
    border: 2px solid white;
    padding-top: 5px;
    height: 0px auto;
    min-height: 23px;
    width: 200px;
    text-align: center;
    float: right;
}


这是运行中的代码:https://codepen.io/anon/pen/BRpMRy

如果您调整浏览器的大小,则可以看到它们重叠。

如果有人可以提出解决方案,那就太好了,我们将不胜感激。

最佳答案

object标签定义HTML文档中的嵌入式对象。使用此元素可以在您的网页中嵌入多媒体(例如音频,视频,Java applet,ActiveX,PDF和Flash)。它还可以用于将另一个网页嵌入到HTML文档中。

我认为这更好!

<table>
  <tr>
      <td>Born</td><td>February 4, 1913</td>
  </tr>
  <tr>
      <td>Die</td><td>October 24, 2005</td>
  </tr>
  <tr>
     <td>Spouse(s)</td><td>Raymond Parks</td>
  </tr>
  <tr>
    <td>Occupation</td><td>Civil rights activist</td>
  </tr>
</table>

关于html - 调整浏览器大小时文本重叠,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43662920/

10-11 12:34
查看更多