Я хочу, чтобы раздел был посередине страницы. - PullRequest
Новая
       1

Я хочу, чтобы раздел был посередине страницы.

2 голосов
/ 04 марта 2020

У меня есть страница, на которой есть раздел, навигация, статья. Раздел содержит навигацию и статью. На данный момент навигация и статья занимают всю страницу. Но мне нужна статья, а навигация должна быть в центре страницы. Я упомянул https://www.w3schools.com/html/html_layout.asp и разработал веб-страницу. Мой html код выглядит следующим образом 

<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

Мой css выглядит следующим образом 

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

При ссылке на CSS Получение Центра статей есть включено поле слева: авто; поле справа: авто; в «разделе» 

 section:after {
        content: "";
        display: table;
        clear: both;
margin-left: auto; 
margin-right: auto;

Это не дало мне ожидаемый результат, что я хочу. Ожидаемый результат: навигация и статья должны быть в середине страницы. 

<html>

<head>


    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
         /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }

    </style>

</head>
<body>
<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>

</body>
</html>

What I need is the choose the booking date(nav) and the article should be in middle leaving the space in the left and right. As of now, you can see it's the full width of the page

Ответы [ 4 ]

0 голосов
/ 04 марта 2020

Я добавил отдельный вариант с flexbox. Это легко реализовать, и вам нужно беспокоиться о ширине и отступах. 

 /* Create two columns/boxes that floats next to each other */
 section {
   display: flex;
   flex-direction: row;
 }
 
 nav {
   /* only for demonstration, should be removed */
   background: #ccc;
   padding: 20px;
   min-width: 30%;
 }

 article {
   padding: 20px;
   background-color: #f1f1f1;
   flex-grow: 1;
 }


 /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
 @media (max-width: 600px) {

   section {
   flex-direction: column;
   }
 }
<header class="header header-default header">
  <div class="container-fluid">
    <div class="header-header">
      <a class="header-brand" href="#">
        <img src="" alt="">
      </a>
      <h1>My application</h1>
    </div>
  </div>
</header>
<section>
  <nav>
    <label for='Date'>Choose the booking date:</label>
    <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
    <input class="btn btn-success" type='button' id='submit' value='Submit'>
  </nav>
  <article>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula orci. Quisque in diam quis risus pellentesque sagittis sed sit amet mauris. Nullam ante nulla, pulvinar sit amet efficitur vitae, porttitor et est. Donec bibendum massa feugiat aliquet rutrum. Maecenas et ante vitae dolor dapibus luctus. Sed eget risus nisi. Praesent ultrices velit eu nisi faucibus ultrices. Suspendisse in facilisis odio.
      </p>
      <p> Donec at odio sit amet nulla bibendum ornare pulvinar vitae nulla. Curabitur eu erat et nulla vehicula porta. Curabitur quis luctus magna. Nullam vestibulum pretium risus eget accumsan. Nullam commodo turpis massa, tincidunt tempus lacus maximus non. Pellentesque facilisis finibus urna ut volutpat. Etiam placerat urna at venenatis bibendum.</p>
    </div>
  </article>
</section>
0 голосов
/ 04 марта 2020

Я уверен, что вам действительно нужны отступы, поэтому я бы предложил просто удалить float: left; и width: 70%; в вашей статье и позволить ей автоматически заполнить оставшееся место: 

section {
  max-width: 100%;
}

nav {
  float: left;
  width: 30%;
  height: 300px;
  /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

article {
  padding: 20px;
  background-color: #f1f1f1;
  height: 300px;
  /* only for demonstration, should be removed */
}


/* Clear floats after the columns */

section:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {
  nav,
  article {
    width: 100%;
    height: auto;
  }
}
<header class="header header-default header">
  <div class="container-fluid">
    <div class="header-header">
      <h1>My application</h1>
    </div>
  </div>
</header>
<section>
  <nav>
    <label for='Date'>Choose the booking date:</label>

    <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
    <input class="btn btn-success" type='button' id='submit' value='Submit'>
  </nav>
  <article>
    <div>
      <p></p>
    </div>
  </article>

</section>
0 голосов
/ 04 марта 2020

Спасибо, я нашел решения для этого. Я добавил маржинальное левое и маржинальное правое авто в разделе после. Но теперь я попытался добавить эти две строки в разделы. 

section {
       max-width: 80%;
       margin-right: auto;
       margin-left: auto;
     }  

 I didn't do any changes other than this and it worked.
0 голосов
/ 04 марта 2020

Вы сделали правильно, только одна ошибка - вы не учитывали отступы по ширине. Пожалуйста, попробуй. 

 /* Create two columns/boxes that floats next to each other */
      nav {
        float: left;
        width: calc(30% - 40px);
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
      }



      article {
        float: left;
        padding: 20px;
        width: calc(70% - 40px);
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
      }

      /* Clear floats after the columns */
      section:after {
        content: "";
        display: table;
        clear: both;
      }



      /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
      @media (max-width: 600px) {
        nav, article {
          width: 100%;
          height: auto;
        }
      }
<header class="header header-default header">
    <div class="container-fluid">
        <div class="header-header">
            <a class="header-brand" href="#">
                <img></img></a>
            </a>
            <h1>My application</h1>
        </div>
    </div>
</header>
<section>
    <nav>
        <label for='Date'>Choose the booking date:</label>

        <input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
        <input class="btn btn-success" type='button' id='submit' value='Submit'>
    </nav>
    <article>
        <div>
            <p></p>
        </div>
    </article>

</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...