Блог

Главная - Вопросы по программированию - Как мне изменить положение .container

Как мне изменить положение .container

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать веб-сайт (просто для обучения). Я хочу, чтобы «следуйте за нами» 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>

мой веб-сайт выглядит

Комментарии:

1. Я бы посоветовал вам взглянуть на bootstrap следующим, но хорошо, что вы пытаетесь учиться с нуля. Bootstrap помешал бы вам заново изобретать колесо.

Ответ №1:

Это должно делать то, что вы хотите. 🙂

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

Ответ №2:

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

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

Вы могли бы попробовать этот CSS. Надеюсь, это решит вашу проблему.

Ответ №3:

Попробуйте:

 position:absolute, bottom:0px

Комментарии:

1. Было бы полезно, если бы вы объяснили, почему и добавили фрагмент кода, чтобы показать, как это делается, и были как можно более наглядными в своих ответах.

Метки: