如何将页面上的 text/video/images 与 HTML 对齐

Question

我正在尝试在我创建的网页中对齐左侧的“索引”框和右侧的视频。

我希望视频框紧挨着索引框。我该怎么做？

我post代码，网站图片。

<!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>

Answer 1

我将视频和索引框包装在一个 div 中并给 div (class 名称 my-div) 显示 flex;

<!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>

Answer 2

通过使用 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>

如何将页面上的 text/video/images 与 HTML 对齐

How to align text/video/images on a page with HTML

html

alignment