Question

我目前正在根据自己的作品集开发技能页面，并且想知道是否有人可以解释我如何在页面上有6个部分，在顶部有3个部分，在底部有3个部分，最好不必创建滚动条并保持一页上全部冲洗都很好，但是如果没有，请不要担心。我将在下面提供我的代码和页面示例。任何信息都会有很大帮助。先感谢您。

页面示例

    <!DOCTYPE html>
<html>

<div class="split left">
  <div class="centered">
    <img src="Assets/coding.png" alt="Online World">
    <h2>Website Developer</h2>
    <div class="svg-wrapper">
      <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="150" />
        <div id="text">
          <a href="web.html"><span class="spot"></span>Learn More</a>
        </div>
      </svg>
  </div>    
  </div>
</div>


  <div class="split center">
      <div class="centered">
        <img src="Assets/technician.png" alt="Online World">
        <h2>ICT Technician</h2>
        <div class="svg-wrapper">
          <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
            <rect id="shape" height="40" width="150" />
            <div id="text">
              <a href="web.html"><span class="spot"></span>Learn More</a>
            </div>
          </svg>
      </div>    
      </div>
    </div>

 <div class="split right">
      <div class="centered">
        <img src="Assets/shield.png" alt="Security">
        <h2>Security Analyst</h2>
        <div class="svg-wrapper">
          <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
            <rect id="shape" height="40" width="150" />
            <div id="text">
              <a href="web.html"><span class="spot"></span>Learn More</a>
            </div>
    </svg>
  </div>      
</div>

CSS：

.split {
 color: white;
 font-family: sans-serif;
 height: 100%;
 width: 33.33%;
 position: fixed;
 top: 0;
 overflow-x: hidden;
 padding-top: 0px;
}

.left { 
  left: 0;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
    color: aliceblue;
    font-family: sans-serif;
}

.right h2 {
    color: aliceblue;
    font-family: sans-serif;
}
.center {
  left:33%;
  right:33%;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
  right: 0;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
}

Answer 1

这可以使用引导列划分完成：

<div class="row">
 <div class="col-md-4">
     <!-- Top Left Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Top Center Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Top right Block code here -->
 </div>
</div>
<div class="row">
 <div class="col-md-4">
     <!-- Bottom Left Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Bottom Center Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Bottom right Block code here -->
 </div>
</div>

Answer 2

您可以借助CSS网格轻松完成

用类节将div中的所有内容包裹起来

<div class="sections"></div>

现在用

定义一个类

.sections{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}

Answer 3

您可以使用Bootstrap将屏幕分为6部分。请参阅下面的引导程序代码

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-xs-4" style="border:1px solid;">1</div>
      <div class="col-md-4 col-xs-4" style="border:1px solid;">2</div>
      <div class="col-md-4 col-xs-4" style="border:1px solid;">3</div>
      <div class="col-md-4 col-xs-4" style="border:1px solid;">4</div>
      <div class="col-md-4 col-xs-4" style="border:1px solid;">5</div>
      <div class="col-md-4 col-xs-4" style="border:1px solid;">6</div>
    </div>
  </div>
</body>

Answer 4

我刚刚编辑了您的代码。您可以根据需要调整容器的高度。根据身高，第一部分在顶部，第二部分在底部。在移动设备中，所有内容都会按照您的参考一一对齐。我希望这对您有用。

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: inherit;
}

.first-section {
    width: 100%;
    align-self: start;
}

.second-section {
    width: 100%;
    align-self: end;
}

.container {
    display: flex;
    flex-wrap: wrap;
    min-height: 500px;
}

.split {
    color: white;
    font-family: sans-serif;
    height: 100%;
    width: 33.33%;
    display: inline-block;
    float: left;
    text-align: center;
    padding: 20px 0;
}

.left {
    left: 0;
    background: #0F2027;
    background: linear-gradient(to bottom, #0F2027, #080e10);
}

.left h2 {
    color: aliceblue;
    font-family: sans-serif;
}

.right h2 {
    color: aliceblue;
    font-family: sans-serif;
}

.center {
    left: 33%;
    right: 33%;
    background: #0F2027;
    background: linear-gradient(to bottom, #0F2027, #080e10);
}

.right {
    right: 0;
    background: #0F2027;
    background: linear-gradient(to bottom, #0F2027, #080e10);
}

.centered img {
    width: 150px;
}

@media (max-width: 767px) {
    .container {
        display: block;
    }
    .split {
        width: 100%;
        float: none
    }
}

<div class="container">
<div class="first-section">
	<div class="split left">
	  <div class="centered">
		<img src="Assets/coding.png" alt="Online World">
		<h2>Website Developer</h2>
		<div class="svg-wrapper">
		  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
			<rect id="shape" height="40" width="150" />
			<div id="text">
			  <a href="web.html"><span class="spot"></span>Learn More</a>
			</div>
		  </svg>
	  </div>    
	  </div>
	</div>


	  <div class="split center">
		  <div class="centered">
			<img src="Assets/technician.png" alt="Online World">
			<h2>ICT Technician</h2>
			<div class="svg-wrapper">
			  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
				<rect id="shape" height="40" width="150" />
				<div id="text">
				  <a href="web.html"><span class="spot"></span>Learn More</a>
				</div>
			  </svg>
		  </div>    
		  </div>
		</div>

	 <div class="split right">
		  <div class="centered">
			<img src="Assets/shield.png" alt="Security">
			<h2>Security Analyst</h2>
			<div class="svg-wrapper">
			  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
				<rect id="shape" height="40" width="150" />
				<div id="text">
				  <a href="web.html"><span class="spot"></span>Learn More</a>
				</div>
				</svg>
			</div>      
		</div>
	</div>
</div>
<div class="second-section">
	<div class="split left">
	  <div class="centered">
		<img src="Assets/coding.png" alt="Online World">
		<h2>Website Developer</h2>
		<div class="svg-wrapper">
		  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
			<rect id="shape" height="40" width="150" />
			<div id="text">
			  <a href="web.html"><span class="spot"></span>Learn More</a>
			</div>
		  </svg>
	  </div>    
	  </div>
	</div>


	  <div class="split center">
		  <div class="centered">
			<img src="Assets/technician.png" alt="Online World">
			<h2>ICT Technician</h2>
			<div class="svg-wrapper">
			  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
				<rect id="shape" height="40" width="150" />
				<div id="text">
				  <a href="web.html"><span class="spot"></span>Learn More</a>
				</div>
			  </svg>
		  </div>    
		  </div>
		</div>

	 <div class="split right">
		  <div class="centered">
			<img src="Assets/shield.png" alt="Security">
			<h2>Security Analyst</h2>
			<div class="svg-wrapper">
			  <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
				<rect id="shape" height="40" width="150" />
				<div id="text">
				  <a href="web.html"><span class="spot"></span>Learn More</a>
				</div>
				</svg>
			</div>      
		</div>
	</div>
</div>
</div>

分为6页

4 个答案: