我之前就导航菜单问过这个问题。我收到的答案帮助我解决了这个问题(我不得不将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/