html - HTML：如何在标题中定位元素？

Question

我正在尝试用 HTML 建立我的个人记录，但我还有最后一个问题要完成它。
我想像这样构建我的标题：

其中：文本摘要将是我正在寻找的工作
照片将是我的照片
名称将是我的名字
个人信息将是我的地址，电话号码...

但我还没有真正找到一个好方法来做到这一点......当我在浏览器上按 CTRL+ 时，元素会以各种方式出现......

    /* HEADER BLOCK */
    header{
        margin: 2%;
        font-size: 15pt;
        font-family: Comic Sans MS, Comic Sans, cursive;
        width : 96%;
        display: inline-block;
    }

    img#profilePhoto{
        height: 236px;
        width: 236px;
        float: left;
    }

    div#description{
        float: right;
        text-align: right;
    }

    div#search{
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        font-size: 25pt;
        width: 5000px;
    }

    p#name{
        padding: 8px;
        vertical-align: bottom;
        text-align: left;
        font-size: 20pt;
        background-color: #7E97AD;
        color: white;
        width: 100%;
        height: 20pt;
    }

 <br>
 <header>
      <img id="profilePhoto" src="images/photo.jpg" alt="Photo de Profil">
      <div id="description">
        FIELD1<br>
        FIELD2<br>
        FIELD3<br>
        FIELD4<br>
        FIELD5<br>
        FIELD6<br>
        FIELD7<br>
      </div>

      <br><br>
      <div id="search">
        <a href="general/recherche.html">ACTUALLY LOOKING FOR A POST GRADUATE
        INTERNSHIP</a>
      </div>

      &nbsp;
      <p id="name">
        &nbsp;&nbsp;NAME
      </p>
    </header>

有人可以告诉我如何以一种好的方式做到这一点吗？

标签： htmlcssweb

Answer 1

只需更改您的CSS

   header
        {
            display: row;
            min-width: 100%;
        }
        header img
        {
            display: table-cell;
            float: left;
            width: 25%;
            height: 150px;
        }
        header .right-banner
        {
            display: table-cell;
            float: left;
            width: 75%;
            height: 150px;
        }
        #description
        {
            display: inline-block;
            float: right;
            text-align: center;
            width: 30%;
            background: #729FCF;
            margin-top: 4px;
        }
        #search
        {
            display: inline-block;
            float: left;
            width: 66%;
            margin: 30px 2%;
            text-align: center;
            background: #729FCF;
        }
        
        #search a
        {
            color: #000;
            text-decoration: none;
        }
        
        #name
        {
            display: block;
            background: #f00;
            text-align: left;
        }

   <br>
    <header>
      <img id="profilePhoto" src="https://dummyimage.com/150.png/#729FCF/#000" alt="Photo de Profil">
      <div class="right-banner">
      
      <div id="description">
        FIELD1<br>
        FIELD2<br>
        FIELD3<br>
        FIELD4<br>
        FIELD5<br>
        FIELD6<br>
        FIELD7<br>
      </div>
      <div id="search">
        <a href="general/recherche.html">ACTUALLY LOOKING FOR A POST GRADUATE
        INTERNSHIP</a>
      </div>

      &nbsp;
      <p id="name">
        &nbsp;&nbsp;NAME
      </p>
      </div>
    </header>