Question

所以基本上我在用javascript编写游戏。我左边有一个画布，中间有一个画布，一个textarea顶部，右下方有一个画布。但我似乎无法获得正确的CSS代码来像图片一样找出这种布局。我希望中间占据页面中间的大约50-60％，左侧和右侧列占据剩余的空间。如果它通过浏览器窗口自动调整大小会很好。任何帮助，将不胜感激。

Answer 1

设置container以容纳所有元素，然后在里面制作更小的容器。使用CSS定位每个并设置其属性。

我在这里设置了一般CSS class .generalStyles来简化代码。

您可以使用以下内容：（运行代码段）

.generalStyles
{
  position:relative;
  float:left;
  background-color:#000;
  border-radius:4px;
  box-sizing:border-box;
  color:#f00;
  height:100px;
  padding:5px;
  text-align:center;
}

.container
{
  width:100%;
  background-color:#FFF;
}

.leftPanel
{
  width:24%;
  margin:0 1% 0 0;
  
}

.rightPanel
{
  width:24%;
  margin:0 0 0 1%;
  background-color:#FFF;
  padding:0;
}

.middlePanel
{
  width:50%;
  margin:0;
}

.topPanel
{
  width:100%;
  margin:0;
  height:49.5%;
}

.bottomPanel
{
  width:100%;
  margin:1% 0 0 0;
  height:49.5%;
}

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<div class="container generalStyles">
  <div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
  <div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
  <div class="rightPanel generalStyles">
     <div class="topPanel generalStyles">top stuff<br/>and more here</div>
     <div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
  </div>
</div>
</body>

</html>

Answer 2

＆＃13;

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

h2 {
	  text-align:center;
    font-family:arial;
    color:red;
    font-weight:normal;
}

.left {
    background-color: #000;
    border-radius:10px;
    float: left;
    width: 20%;
    padding: 10px;
    margin:10px;
    height: 300px; 
}

.middle {
    background-color: #000;
    border-radius:10px;
    float: left;
    width: 60%;
    padding: 10px;
    margin:10px;
    height: 300px; 
}
.right {
    float: left;
    width: 20%;
    margin: 10px;
    height: 300px;
    position: relative;
    top: 0;
}

.top {
  	background-color: #000;
    border-radius:10px;
    width: 100%;
    height: 47%;
    padding: 10px;
}

.bottom {
    background-color: #000;
    border-radius:10px;
    width: 100%;
    height: 47%;
    padding: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.row {
	  box-sizing:border-box;
    display: flex;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

＆＃13;

<div class="row">
  <div class="left">
    <h2>left</h2>    
  </div>
  <div class="middle">
    <h2>middle</h2>
  </div>
  <div class="right">
  	<div class="top">
    	<h2>top right</h2>
    </div>
    <div class="bottom">
    	<h2>bottom right</h2>
    </div>
  </div>
</div>

＆＃13;

Answer 3

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right">
    <div class="rightDiv"></div>
    <div class="rightDiv"></div>
  </div>
</div

和css

.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}

Fiddle

如何制作3列，右栏有两个部分

3 个答案: