Question

我为我想要的网页制作了一个计划，我将链接here

我试图使用以下代码HTML创建它：

＆＃13;

body {
  background-color: #F4F4F4;
}
#container {
  margin: 0 auto;
  width: 70%;
}
#stage {
  float: left;
}
#LeaderBoard {
  background-color: white;
  float: left;
  width: 400px;
  height: 180px;
}
#ChatRoom {
  background-color: white;
  float: left;
  width: 400px;
  height: 180px;
}
#Options {
  background-color: white;
  float: left;
  width: 400px;
  height: 180px;
}

＆＃13;

<div id="container">

  <canvas id="stage" width="600" height="600">
    Canvas not supported
  </canvas>

  <div id="LeaderBoard" width="400" height="180">
    <h3>LeaderBoard<h3>
            <ul id="LeaderBoardList">
            </ul>
        </div>
		
        <div id="ChatRoom" width = "400" height = "180">
			<textarea width = "400" height = "180">
			</textarea>
			<input type="text">
        </div>
		
        <div id="Options" width = "400" height = "180">
			<button type="button">Left</button>
			<button type="button">Right</button>
			<button type="button">Up</button>
			<button type="button">Down</button>
			
			<button type="button">Music</button>
			<button type="button">SFX</button>
        </div>
		
    </div>

＆＃13;

目前它看起来像这样here更糟糕的是，当我调整网页大小时，画布将位于顶部，其余位于其下方

我不担心按钮被分配和东西，只有div和尺寸等任何人都可以帮助我像我的设计一样，任何帮助是适当的

Answer 1

容器的宽度需要固定，因此它不会向下折叠，并且您尝试在HTML中内联设置的宽度和高度需要px才能以这种方式工作。更好的是，只需在外部CSS中设置它们。我还从舞台上移走了浮子，让其他浮子靠近它。 https://jsbin.com/quxebalewi/edit?html,css,output

<body>
  <div id="container">

    <canvas id="stage">
        Canvas not supported
    </canvas>

    <div id="LeaderBoard">
        <h3>LeaderBoard<h3>
        <ul id="LeaderBoardList">
        </ul>
    </div>

    <div id="ChatRoom">
        <textarea >
        </textarea>
        <input type="text">
    </div>

    <div id="Options">
        <button type="button">Left</button>
        <button type="button">Right</button>
        <button type="button">Up</button>
        <button type="button">Down</button>

        <button type="button">Music</button>
        <button type="button">SFX</button>
    </div>

  </div>
 </body>

和css

body{
  background-color: #F4F4F4;
}

#container{
  margin: 0 auto;
  width: 1020px;
  height: 620px;
}

#stage{
  float: left;
  width: 600px;
  height: 600px;
}

#LeaderBoard{
  float: left;
  background-color: white;
  width: 400px;
  height: 180px;
}

#ChatRoom{
  float: left;
  background-color: white;
  width: 400px;
  height: 180px;
}

#Options{
  float: left;
  background-color: white;
  width: 400px;
  height: 180px;
}

需要帮助让我的网页看起来像我的计划 - HTML

1 个答案: