Question

我正在尝试建立一个网站（仅供学习）。我想要的是“跟随我们” h2，并在侧面（右侧）显示两个图标youtube和twitter。

，以及网页是否缩小，或者我是否在移动设备上打开网站。它必须在菜单下。

<!DOCTYPE html>

<html>
    <!--
      Meta data and stylesheet link
    -->
    <head>
      <meta charset="UTD-8" >
      <meta   name="description" content="Tech Lovers Youtube Channel" >
      <meta name="keywords" content="HTML,CSS,XML,Javascript">
      <meta name="author" content="Owais Qureshi">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Tech Lovers | Welcome</title>
     <link rel="stylesheet" href="../CSS/Style.css">
    </head>
    <body>
      <header>
        <!--
          top logo with heading
        -->
      <div id="logo" class="container">
         <img src="../Media/IMG/logo.jpg"  alt="tech_logo">
        <h1>Tech Lovers</h1> 
      </div>
       <!--
          menu
       -->
      <nav  id="menu" class="container">
        <ul>
          <li><a href="../HTML/index.html">Home</a></li>
          <li><a href="../HTML/Blog.html">Blogs</a></li>
          <li><a href="../HTML/About us.html">About Us</a></li>
        </ul>
      </nav>
      <!--
        i want this on  right side.      -->
      <div id="follow_us" class="container">
      <h2>Follow us</h2>
      <a href="https://www.youtube.com/channel/UCsxqKI-iEjmtfK5mcjqTTuA">youtube_img_icon</a>
      <a href="https://twitter.com/techlover771">twitter_img_icon</a>
    </div>   
      </header>
    </body>
</html>

my website looks

Answer 1

尝试：

position:absolute, bottom:0px

Answer 2

header {
  display: flex;
  flex-direction: column;
}

@media (min-width: 480px) {
  header {
    flex-direction: row;
  }
}

您可以尝试使用此CSS。希望它能解决您的问题。

Answer 3

这应该做您想要的。：）

.headerContainer{
  display : inline-block;
  float : left;
  width : 200px;
}


/* small screens and mobile */
@media screen and (max-width:767px) {
 .headerContainer{
 display : block;
 float : left;
 clear : both;
 
 }
}

<!DOCTYPE html>

<html>
    <!--
      Meta data and stylesheet link
    -->
    <head>
      <meta charset="UTD-8" >
      <meta   name="description" content="Tech Lovers Youtube Channel" >
      <meta name="keywords" content="HTML,CSS,XML,Javascript">
      <meta name="author" content="Owais Qureshi">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Tech Lovers | Welcome</title>
     <link rel="stylesheet" href="../CSS/Style.css">
    </head>
    <body>
      <header>
        <!--
          top logo with heading
        -->
      <div id="logo" class="container">
         <img src="../Media/IMG/logo.jpg"  alt="tech_logo">
        <h1>Tech Lovers</h1> 
      </div>
       <!--
          menu
       -->
      <nav  id="menu" class="headerContainer">
        <ul>
          <li><a href="../HTML/index.html">Home</a></li>
          <li><a href="../HTML/Blog.html">Blogs</a></li>
          <li><a href="../HTML/About us.html">About Us</a></li>
        </ul>
      </nav>
      <!--
        i want this on  right side.      -->
      <div id="follow_us" class="headerContainer">
      <h2>Follow us</h2>
      <a href="https://www.youtube.com/channel/UCsxqKI-iEjmtfK5mcjqTTuA">youtube_img_icon</a>
      <a href="https://twitter.com/techlover771">twitter_img_icon</a>
    </div>   
      </header>
    </body>
</html>

如何更改.container的位置

3 个答案: