------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 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消