如何解决如何使用 HTML 对齐页面上的文本/视频/图像
我正在尝试在我创建的网页中对齐左侧的“索引”框和右侧的视频。
我希望视频框就在索引框旁边。我该怎么做？
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Shane Curries Resume in HTML</TITLE>
<link rel="stylesheet" type="text/css" href="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\CSS\index.css" />
<style>
div {
background-color: lightgreen;
width: 350px;
border: 15px solid green;
padding: 0px;
margin: 0px;
</style>
</HEAD>
<BODY Background="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Contact\Photos\background.png">
<h1>
<center>
Welcome to Shane Duncan Currie's Website
<img src="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\Photos\tree.jpg"width=589 Height=389 ALT="tree">
</center>
</h1>
<div>
<p>
<H2>
<center>
<font size=7>Index</font>
</H2>
</center>
</p>
<center>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\About\about.html">About me</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Edcuation\Education.html">Education</A> </font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Employment\employment.html ">Employment history</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Skills\skills.html">Skills</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Contact\contact.html">Contact</A> </font>
</center>
</div>
<br>
<Embed src="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\Video\TestVideo.mp4" align= right>解决方法
我将视频和索引框包裹在一个 div 中，并赋予该 div（类名 my-div）显示弹性；
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Shane Curries Resume in HTML</TITLE>
<link rel="stylesheet" type="text/css" href="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\CSS\index.css" />
<style>
div {
background-color: lightgreen;
width: 350px;
border: 15px solid green;
padding: 0px;
margin: 0px;
}
.my-div {
display: flex;
justify-content: space-between;
}
</style>
</HEAD>
<BODY Background="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Contact\Photos\background.png">
<h1>
<center>
Welcome to Shane Duncan Currie's Website
<img src="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\Photos\tree.jpg"width=589 Height=389 ALT="tree">
</center>
</h1>
<div class="my-div">
<p>
<H2>
<center>
<font size=7>Index</font>
</H2>
</center>
</p>
<center>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\About\about.html">About me</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Edcuation\Education.html">Education</A> </font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Employment\employment.html ">Employment history</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Skills\skills.html">Skills</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Contact\contact.html">Contact</A> </font>
</center>
<Embed src="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\Video\TestVideo.mp4">
<p>test text</p>
</div>通过使用 float: left; 我能够解决问题
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Shane Curries Resume in HTML</TITLE>
<link rel="stylesheet" type="text/css" href="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\CSS\index.css" />
<style>
div {
background-color: lightgreen;
width: 350px;
border: 15px solid green;
padding: 0px;
margin: 0px;
float: left;
</style>
</HEAD>
<BODY Background="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Contact\Photos\background.png">
<h1>
<center>
Welcome to Shane Duncan Currie's Website
<img src="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\Photos\tree.jpg"width=589 Height=389 ALT="tree">
</center>
</h1>
<div>
<p>
<H2>
<center>
<font size=7>Index</font>
</H2>
</center>
</p>
<center>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\About\about.html">About me</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Edcuation\Education.html">Education</A> </font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Employment\employment.html ">Employment history</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Skills\skills.html">Skills</A></font>
<br>
<font size=6><A HREF="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Contact\contact.html">Contact</A> </font>
</center>
</div>
<br>
<Embed src="C:\Users\shane\OneDrive\Documents\HTML\Shane_Currie_Resume_HTML\Index\Video\TestVideo.mp4" align= right>
</BODY>
</HTML>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。