Question

我希望能够显示3个带有以下图像，标题和按钮的列。我知道我在使用左右拆分，但是我无法自己创建3列。我正在将此用于我的投资组合，如果您需要更多信息或我的投资组合的示例，以便您了解我的需求，那么请务必询问。

    <!DOCTYPE html>
    <html>

    <head>`enter code here`
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Joe's Portfolio</title>
            <link rel="stylesheet" type="text/css" href="main.css">
    </head>

    <body>
        <header class="fix">
            <div class="nav-area">
                <ul class="menu-area">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="work.html">Coursework</a></li>
                    <li class="active"><a href="future.html">Future Aspirations</a></li>
                    <li><a href="about.html">About Me</a></li>
                    <li><a href="cv.html">CV</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>

                    <div class="banner-text-name">
                <h2>Joe Busby</h2>
            </div>

        </header>

            <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 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>
        </body>

        </html>

// CSS //

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.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;
}

.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.example {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
}

在该div中创建元素时，它们会自动以33％的比例显示

Answer 2

您可以始终使用引导程序，如前所述。如果您更愿意使用纯CSS和html进行操作，请参见http://jsfiddle.net/a6yecjqb/4/

.split {
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

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

如果更改拆分的宽度并添加中心块，则将在单独的行中获得3 div。如果需要更多说明，请告诉我

Answer 3

您可以使用flexbox做到这一点：这是一个简单的示例：

body {
  background: gray;
}

.wrapper {
  margin: 0 auto;
  width: 500px;
  display: flex;
}

.columns {
  padding: 5px;
  color: black;
  position: relative;
  height: 500px;
  overflow-x: hidden;
  background: white;
  margin-right: 5px;
}

.columns h2 {
    color: black;
    font-family: sans-serif;
}

.centered img {
  width: 150px;
}

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Joe's Portfolio</title>
      <link rel="stylesheet" type="text/css" href="main.css">
    </head>

    <body>

<div class="wrapper">
    <div class="columns ">
      <div class="centered">
        <img src="https://via.placeholder.com/150x150" alt="Online World">
        <h2>Website Developer</h2>   
      </div>
    </div>
  
    <div class="columns ">
      <div class="centered">
        <img src="https://via.placeholder.com/150x150" alt="Online World">
        <h2>Website Developer</h2>   
      </div>
    </div>
  
    <div class="columns ">
      <div class="centered">
        <img src="https://via.placeholder.com/150x150" alt="Online World">
        <h2>Website Developer</h2>   
      </div>
    </div>
</div>
</body>

</html>

https://jsbin.com/xipeduxuda/

如何在HTML中创建3列

3 个答案: