Question

我正在建立一个包含游戏的网站。说明区域应该在屏幕的右侧，升级区域应该在屏幕的左侧。现在，this是我所拥有的。

（请不要对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>

Answer 1

我对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>

Answer 2

CRayen的答案似乎并没有达到您想要的目的，因此请看here。

我做了几件事：

将upgrades格移出text1格，使它们都成为 game div的直接子代
将game设置为具有flexbox的显示值，这是一种新颖的CSS布局技术，确实有助于这种设计风格。
让升级和说明框的flex-basis均为20％，这与您的宽度类似：20％；
删除了upgrades上的页边距权利

我强烈建议您查看Flexbox，以获取有关如何创建和编辑此类布局的更多信息！

如何将<div>标签放置在屏幕的相对侧？

2 个答案: