Question

我想在我的网页中创建一个内容部分，分为三列：页面左侧有一列固定宽度为250px的列，右侧有一列固定宽度为250px的列页面和它们中心的列应根据浏览器宽度调整大小。我不想使用bootstrap，因为没有固定宽度的选项。

Answer 1

你可以尝试这样的事情;）

＆＃13;

#div1 {
  width: 25vw;
  height: 100vh;
  background: red;
}

#div2 {
  height: 100vh;
  margin-left: 25vw;
  width:50vw;
  margin-top:-100vh;
  background: green;
}

#div3 {
  width: 35vh;
  height: 100vh;
  margin-top:-100vh;
  margin-left: 75vw;
  background: blue;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>repl.it</title>
        <script src="index.js"></script>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    </body>
</html>

＆＃13;

Answer 2

使用表元素执行此操作可能更容易：

<table style="width:100%;height:100%;text-align:center">
<tr>
<td style="width:250px; background-color:red">
<h1>Column One</h1>
</td>
<td style="background-color:green">
<h1>Column Two</h1>
</td>
<td style="width:250px;background-color:blue">
<h1>Column Three</h1>
</td>
</tr>
</table>

Answer 3

您可以使用absolute定位来实现这一目标，请参阅此示例：

player.runAction(SKAction.animateWithTextures(walking, timePerFrame: 0.5))

.main {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
}
.left,
.right {
  position: absolute;
  width: 250px;
  background: pink;
  top: 0;
  bottom: 0;
  margin: 0;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.middle {
  margin: 0 250px;
}

难以用CSS创建简单的布局

3 个答案: