Как разместить теги <div>на противоположных сторонах экрана? - PullRequest
Новая
       0

Как разместить теги <div>на противоположных сторонах экрана?

0 голосов
/ 30 августа 2018

Я делаю сайт, который содержит игру. Область инструкций должна быть на правой стороне экрана, а область апгрейдов - на левой. Прямо сейчас, это - это то, что у меня есть.

(пожалуйста, не комментируйте ничего кроме тегов div, я знаю, что я испортил размеры) 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Ответ CRayen не выглядел так, как будто он действительно достиг того, чего вы хотели, поэтому посмотрите здесь .

Я сделал несколько вещей:

  1. Переместил upgrades div из text1 div, чтобы они оба прямые дети game div
  2. Установите для game отображаемое значение flexbox, что является новой техникой верстки CSS, которая действительно помогает в этом стиле дизайна.
  3. Дайте обоим апгрейдам и инструкциям flex-basis 20%, что соответствует ширине: 20%;
  4. Убрано поле справа upgrades

Я настоятельно рекомендую заглянуть в Flexbox для получения дополнительной информации о том, как создавать и редактировать макеты, подобные этой!

0 голосов
/ 30 августа 2018

Я внес несколько изменений в CSS: 

h1 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

p {
  font-family: 'Roboto', sans-serif;
  padding: 15px
}

.text1 {
  background-color: lightgrey;
  text-align: left;
  border: 1.4px solid grey;
  border-radius: 10px;
  height: 20em;
  width: 20%;
  float: right;
}

.mono {
  font-family: 'Roboto Mono', monospace;
}

h2 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.upgrades {
  background-color: lightgrey;
  text-align: left;
  border: 1.4px solid grey; 
  border-radius: 10px;
  height: 20em;
  width: 20%;
  float: left;
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cookie Clicker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    </head>

    <body>
      <h1>Cookie Clicker</h1>
      <br>
      <div class=game><!--Game-->
        <div class='text1'><!--Instructions-->
            <h2>Instructions</h2>
              <p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
            </div><!--/Instructions-->
            <div class='upgrades'><!--Upgrades-->
              <p>ttttt</p>
            </div><!--/Upgrades-->
        </div><!--/Game-->
    </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...