如何在没有div的情况下操作文本(HTML/CSS)？
如何在没有div的情况下操作文本(HTML/CSS)？
提问于 2021-12-17 13:17:17
我想用HTML创建我的简历
页面的尺寸与A4一样好吗？
如何定位文字在图片中，但我想没有div？
以及如何使页面&文本固定像PDF或文字，所以当我打印它，它是一致的？
这是我的守则：
#name {
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display: inline;
}
/*ignore line break*/
.title {
font-size: 12pt;
}
.sous-title {
font-weight: bold;
}
body {
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em;
/*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">REDACTED <br>REDACTED</p>
REDACTED REDACTEDAdress Adress EMailEMailEMail
<br> REDACTED0000000
<hr />
<p class="title">Objective</p>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work
with customers and satisfy their needs.
<hr />
<p class="title">Education</p>
ISGS
<p class="sous-title">IT management</p>
September 2014 - July 2017<br> Graduated: No<br> Completed 2nd year
<hr /> CSFMTS
<p class="sous-title"></p>International trade</p>
September 2019 - Current<br> Graduated: Yes<br> Currently on internship
<hr />
<p class="title">Work experience</p>
<p class="sous-title"></p>REDACTED</p>
REDACTED<br> October 2021 - November 2021<br>
<hr />
<p class="title">Languages</p>
English •••••<br> French •••••<br> Italian •••••
<hr />
<p class="title">Skills</p>
Problem-solving Reasonably experienced<br> Communication Reasonably experienced<br> Adaptability
<br> Active Listening
<hr />
<p class="title">Technical skills</p>
Ms-office Advanced level<br> Ciel 2019 Advanced level<br>
<hr />
<p class="title">Hobbies and interests</p>
Exercising and healthcare<br> Yoga and meditation<br> Volunteering
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-17 13:43:52
#name{
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display:inline;
} /*ignore line break*/
.title{font-size: 12pt;}
.sous-title{font-weight: bold;}
body{
padding: 10px;
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em; /*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}
.fright{
float: right;
margin: 0 20px;
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">REDACTED <br>REDACTED</p>
<span class="fright">
REDACTED<br>
REDACTED
</span>
<span class="fright">
REDACTED<br>
REDACTED
</span>
<hr />
<table>
<tr>
<td valign="top" width="230px">Objective</td>
<td>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work with customers and satisfy their needs.
</td>
<tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td valign="top">Education</td>
<td>
ISGS<br>
<b>IT management</b><br>
September 2014 - July 2017<br>
Graduated: No<br>
Completed 2nd year
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td></td>
<td>
CSFMTS<br>
<b> International trade</b><br>
September 2019 - Current<br>
Graduated: Yes<br>
Currently on internship
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Work experience</td>
<td>
<b>REDACTED</b><br>
REDACTED<br>
October 2021 - November 2021<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Languages</td>
<td>
English •••••<br>
French •••••<br>
Italian •••••
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Skills</td>
<td>
Problem-solving Reasonably experienced<br>
Communication Reasonably experienced<br>
Adaptability<br>
Active Listening
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Technical skills</td>
<td>
Ms-office Advanced level<br>
Ciel 2019 Advanced level<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Hobbies and interests</td>
<td>
Exercising and healthcare<br>
Yoga and meditation<br>
Volunteering
</td>
</tr>
</table>
</body>
Stack Overflow用户
发布于 2021-12-17 13:41:10
也许我可以回答你的两个问题。
如何定位文字在图片中，但我想没有div..？
Div实际上并不太困难，也是html的核心概念，因此学习如何使用它们是有益的。您可以在MDN Web文档div详细信息上找到一些很好的解释来帮助您。但是既然你想要一个替代方案，我可以提供一个:桌子。现在，我个人不喜欢使用表格，但它可以做的工作。一个警告是，表可能会使拥有一个在小屏幕上工作良好的响应站点变得更加困难。但是，既然你想模仿打印出来的文档，它就能做到这一点。
示例：
<hr />
<table>
<tr>
<td>
<p class="title">Objective</p>
</td>
<td>A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to
work with customers and satisfy their needs.</td>
</tr>
</table>
<hr />
这有点基本，不符合您想要的样式，但是给您提供了如何将两列并排放置的想法。当然，您需要添加适当的属性来设置单元格大小、填充和间距。
基本原理是对每一行使用<tr>，对行中的每个单元格使用<td>。然后像在word文档中构建电子表格或表格一样。
如何使页面和文本像pdf或word一样固定，所以当我打印它时，它是一致的？
如果使用表，则可以使用固定宽度(以像素为单位)。才能做到这一点。一个很好的参考是MDN上的带有文本溢出的固定宽度表。但又一次警告。这种方法会在较小的屏幕上造成困难；它不是一个响应性的设计。
编辑:在另一个答案中，用户将整个代码更新为表。但要使它始终打印相同，您可能需要添加固定宽度。我希望我的回答能向你解释，餐桌是一种选择，也是可能出现的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70393790
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号