------HTML代码------<!DOCTYPE html><html> <head> <title>********* ******** | Jr Developer</title> <link rel="stylesheet" type="text/css" href="css/portfolioStyle.css"> </head> <body > <header id="nameAndContact"> <div class="container"> <h1>********* ********</h1> <table> <tr> <th></th> <td>Contact Information</td> </tr> <tr> <th>Email:</th> <td>mac************@*****.com</td> </tr> <tr> <th>Phone:</th> <td>***-***-****</td> </tr> </table> </div> </header> <section id="selfTitleAndDesc"> <div class="container"> <h1>Full Stack Developer and Designer</h1> <h2>I write functional and simple to understand code with a strong working knowledge of front and back-end services</h2> </div> </section> </body></html>--------结束 HTML 代码----------------CSS代码-------------.container{ width:80%; margin:auto; overflow:hidden;}#nameAndContact h1{ float:auto; width:70%; padding:0; text-align:center; font-family:"Arial Black", Gadget, sans-serif; font-size:40px; box-sizing: border-box;}#nameAndContact table{ table-layout:fixed; display:inline; float:right; width:30%; padding:0 30px; text-align:center; font-family:"Arial Black", Gadget, sans-serif; font-size:14px;}@media(max-width:700px){ #nameAndContact h1{ width:100%; float:none; } #nameAndContact table{ width:100%; float:none; }}--------CSS 代码结束---------我遇到的问题是，当我调整浏览器中的窗口大小时，电子邮件和“联系信息”一词开始在屏幕右侧被切断。我需要以某种方式将文本包裹在表格中吗？我在 h1 和表格中使用的百分比是否存在问题？也不确定我的表格没有与我的 h1 显示一致的原因。非常感谢任何帮助，我对网络编码相当陌生，谢谢大家:)。
2 回答
慕姐4208626
TA贡献1852条经验 获得超7个赞
删除我注释掉的内容：
内联不适用于浮动
宽度 30% 不稳定，我建议使用像素并更改它们
@media填充只是占用了不必要的空间
#nameAndContact table {
table-layout: fixed;
/*display: inline;*/
float: right;
/*width: 30%;*/
/*padding: 0 30px;*/
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14px;
}
然后将其添加到您的CSS中：
缩短第一列，因为它不需要那么大，所以我给它一个固定的大小
#nameAndContact table th:first-of-type {
width: 90px;
}
我还建议检查表结构（哪里是 td 哪里 th 等）
神不在的星期二
TA贡献1963条经验 获得超6个赞
为了使媒体查询正常工作，您需要在<head>页面部分中使用以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
或者它的某种变体。
- 2 回答
- 0 关注
- 55 浏览
添加回答
举报
0/150
提交
取消