html - 想弄明白

标签 html css

我希望我的陈述的所有答案都从同一个地方开始。例如最喜欢的电视节目和推特回答都从同一个地方开始,中间有均匀的间距。我有下面列出的代码。我还添加了一张它的外观照片。我知道这很简单,但我很难弄明白

html {

	min-height: 100%:;
	overflow: hidden;
}

body {

	height: calc( 100vh - 8em);
	padding: 4em;
	background-color: black;
	text-align: left;
}

p {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	color: white;

}

h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h1 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h5 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}
 .line {

 	position: left;
 	top: 35%;
 	width: 5em;
 	margin: 0 auto;
 	text-align: left;
 }

 img {

 	align-content: left;
 }
<html>
<head>
	<title>Web Developer</title>
	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<img src="jcblogo.png" height="45" width="160">
	<div>
	<p><h4> # General Information</h4></p>
		
		<p><h4>#-------------------------------</h4></p>
	</div>
		
		<p>name    :Jacob Olenick</p>
		<p>Occupation    :Designer and Developer</p>
		<p>Location    :Las Vegas</p>
		
		<div>
		<p><h3># Past Work</h3></p>
			
			<p><h3>#-------------------------------</h3></p>
		</div>
			
			<p>Creative    @ Vous Church</p>
			<p>Creative    @ King's Church</p>
			<p>Creative    @ Relentless Church</p>
			<p>Creative    @ Hillsong Las Vegas</p>
			<p>Developer   @ Chrishan Technology Solutions</p>
			<p>Creative Director    @ Givary 
				
				<div>
				<p><h2># About Me</h2></p>
				
				<p><h2>#-------------------------------<h2></p>
				<div>
				
				<p>Husband to    : Megan Olenick</p>
				<p>Favorite Drink    : Coffee/Orange Juice</p>
				<p>Favorite City    : NYC
				<p>Favorite Preacher    : Carl Lentz</p>
				<p>Best TV Show    : Stranger Things/Chicago PD
				
				
				<div>
				<p><h1># Social and Contact</h1></p>
				
				<p><h1>#-------------------------------</h1></p>
			</div>
				
				<p>twitter    @jacobolenick</p>
				<p>instagram    @jacobolenick</p>
				<p>behance    /jacobolenick</p>
				<p>github    /jacobolenick</p>
				<p>email    olenickjacob@gmail.com</p>
				
				<p><h5>Love what you do and honor God</h5></p>



</body>
</html>

enter image description here

最佳答案

实现你想要的最简单的方法是使用table:

<table>
  <tr>
    <td>Name</td>
    <td>: Jacob Olenick</td>
  </tr>
  <tr>
    <td>Occupation</td>
    <td>: Designer and Developer</td>
  </tr>
  <tr>
    <td>Location</td>
    <td>: Las Vegas</td>
  </tr>
</table>

关于html - 想弄明白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53774656/

相关文章:

javascript - 使用html5的不可见滚动条

html - 如何正确导入jquery-ui

javascript - 在 ng-repeat 中自动调整字体大小

html - 如果第二个 div 为空,如何让 float div 跨越总宽度?

html - 无法对齐内容以在容器之间具有匹配的左右间距

css - 如何减少HTML5视频标签之间的差距

html - 使用 HTML 和 CSS 的曲线文本

html - 使用 css 选择器从所有行中选择第一个 td

html - 如何让两个div并排放置

javascript - 自定义全宽 Slick-Slider