尝试在页面中心创建4个响应相等的框

时间：2017-11-18 12:35:23

标签： html css

网页的示例：enter image description here 所以我尝试使用flexbox这样做。但我对flexbox不是很熟悉。 目标是在页面中心有4个相同的框。与此网站的当前首页类似：http://arma-life.org/#（向下滚动以查看“＃34;为您”这一部分中的框。）

我已经尝试查看当前的代码，但是旧的设计师做了一些事情，我似乎无法让这些代码在新的首页上工作。它应该与图像，标题和解释几乎相似。但是可以放弃href。

任何人都可以指出我正确的方向来做这件事或帮助我。我已经尝试过flexbox，align，margin，......

它也应该响应手机和东西。它应该在HR之下。

这是我目前的代码：

＆＃13;
＆＃13; 
body {
  width: 100%;
  margin: 0;
  font-family: 'open sans', sans-serif;
  zoom: 1;
  overflow-x: hidden;
}

header {
  padding: 20px 0;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
  padding: 0 20px;
  margin: 0 auto;
}
.logo-box {
  float: left;
  margin-right: 20px;
}
.logo-box a {
  outline: none;
  display: block;
}
.logo-box img {display: block;}
nav {
  overflow: hidden;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0px 10px 0px 0px;
  float: right;
}
nav li {
  display: inline-block;
  margin-left: 25px;
  height: 70px;
  line-height: 70px;
  transition: .5s linear;
}
nav a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #868686;
  text-transform: uppercase;
}
nav a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 15px;
  background: #868686;
  transition: width .5s linear;
}
nav a:hover:after {width: 100%;}

@media screen and (max-width: 660px) {
  header {text-align: center;}
  .logo-box {
    float: none;
    display: inline-block;
    margin: 0 0 16px 0;
  }
  ul {float: none;}
  nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
  display: block;
  margin: 0;
  height: 40px;
  line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
  position: relative;
}
.slideshow{
    height: 600px;
}
.fadein img {
  width: 100%;
  position: absolute;
  max-height: 600px;
  left:0;
  top:0;
}

.slogan_hr {
  width: 960px;
  margin: 15px auto 15px auto;
}

hr.style14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}


.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}

.slogan_title {
  font-size: 46px;
  font-weight: 700;
  padding: 15px;
  text-transform: uppercase;
}

.slogan_catchphrase {
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
}


@media only screen and (max-width: 640px) {
  .slideshow{
      height: 300px;
  }
  .fadein img {
    width: 100%;
    position: absolute;
    max-height: 300px;
    left:0;
    top:0;
  }
  .slogan_hr {
    width: 600px;
    margin: 15px auto 15px auto;
  }
}

@media only screen and (max-width: 600px) {
  .slideshow{
      height: 200px;
  }
  .fadein img {
    width: 100%;
    position: absolute;
    max-height: 200px;
    left:0;
    top:0;
  }
  .slogan_hr {
    width: 560px;
    margin: 15px auto 15px auto;
  }
}

@media only screen and (max-width: 480px) {
  .logo {
    max-width: 270px;
  }
}

/** features & articles **/
＆＃13; 
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(function () {
    $('.fadein img:gt(0)').hide();
    setInterval(function () {
      $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
    }, 4000);
  });
    </script>


  </head>
  <body>
    <header>
      <div class="container">
        <div class="logo-box">
          <a href="/">
            <img class="logo" src="images/logo.png">
          </a>
        </div>
          <nav>
            <ul>
              <li><a href="">Forums</a></li>
              <li><a href="">Rules</a></li>
              <li><a href="">Monetization</a></li>
              <li><a href="">Sign-up</a></li>
              <li><a href="">Staff</a></li>
           </ul>
        </nav>
      </div>
    </header>
    <div class="slideshow">
      <div class="fadein">
        <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
        <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
        <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
      </div>
    </div>
    <div class="A3L_Slogan">
      <div class="slogan_title">
        Hardcore Roleplay Community
      </div>
      <div class="slogan_catchphrase">
        The next level roleplay experience
      </div>
      <div class="slogan_hr">
        <hr class="style14">
      </div>
    </div>

  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

我希望这就是你想要的

＆＃13;
＆＃13; 
    body {
      width: 100%;
      margin: 0;
      font-family: 'open sans', sans-serif;
      zoom: 1;
      overflow-x: hidden;
    }
    .flexbox {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.flexbox .box {
    background: #0077dd;
    /* width: 150px; */
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40%;
    margin: 2%;
}
    header {
      padding: 20px 0;
      background-color: #ffffff;
      box-shadow: 0 4px 6px rgba(0,0,0,.2);
    }
    .container {
      padding: 0 20px;
      margin: 0 auto;
    }
    .logo-box {
      float: left;
      margin-right: 20px;
    }
    .logo-box a {
      outline: none;
      display: block;
    }
    .logo-box img {display: block;}
    nav {
      overflow: hidden;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0px 10px 0px 0px;
      float: right;
    }
    nav li {
      display: inline-block;
      margin-left: 25px;
      height: 70px;
      line-height: 70px;
      transition: .5s linear;
    }
    nav a {
      text-decoration: none;
      display: block;
      position: relative;
      color: #868686;
      text-transform: uppercase;
    }
    nav a:after {
      content: "";
      width: 0;
      height: 2px;
      position: absolute;
      left: 0;
      bottom: 15px;
      background: #868686;
      transition: width .5s linear;
    }
    nav a:hover:after {width: 100%;}

    @media screen and (max-width: 660px) {
      header {text-align: center;}
      .logo-box {
        float: none;
        display: inline-block;
        margin: 0 0 16px 0;
      }
      ul {float: none;}
      nav li:first-of-type {margin-left: 0;}
    }
    @media screen and (max-width: 550px) {
    nav {overflow: visible;}
    nav li {
      display: block;
      margin: 0;
      height: 40px;
      line-height: 40px;
    }
    nav li:hover {background: rgba(0,0,0,.1);}
    nav a:after {content: none;}
    }
    .A3L_Slogan, .slideshow{
      position: relative;
    }
    .slideshow{
        height: 600px;
    }
    .fadein img {
      width: 100%;
      position: absolute;
      max-height: 600px;
      left:0;
      top:0;
    }

    .slogan_hr {
      width: 960px;
      margin: 15px auto 15px auto;
    }

    hr.style14 {
      border: 0;
      height: 1px;
      background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    }


    .A3L_Slogan {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    }

    .slogan_title {
      font-size: 46px;
      font-weight: 700;
      padding: 15px;
      text-transform: uppercase;
    }

    .slogan_catchphrase {
      font-size: 30px;
      font-weight: 500;
      text-transform: uppercase;
    }


    @media only screen and (max-width: 640px) {
      .slideshow{
          height: 300px;
      }
      .fadein img {
        width: 100%;
        position: absolute;
        max-height: 300px;
        left:0;
        top:0;
      }
      .slogan_hr {
        width: 600px;
        margin: 15px auto 15px auto;
      }
    }

    @media only screen and (max-width: 600px) {
      .slideshow{
          height: 200px;
      }
      .fadein img {
        width: 100%;
        position: absolute;
        max-height: 200px;
        left:0;
        top:0;
      }
      .slogan_hr {
        width: 560px;
        margin: 15px auto 15px auto;
      }
    }

    @media only screen and (max-width: 480px) {
      .logo {
        max-width: 270px;
      }
    }
＆＃13; 
<html>
      <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $(function () {
        $('.fadein img:gt(0)').hide();
        setInterval(function () {
          $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        }, 4000);
      });
        </script>


      </head>
      <body>
        <header>
          <div class="container">
            <div class="logo-box">
              <a href="/">
                <img class="logo" src="images/logo.png">
              </a>
            </div>
              <nav>
                <ul>
                  <li><a href="">Forums</a></li>
                  <li><a href="">Rules</a></li>
                  <li><a href="">Monetization</a></li>
                  <li><a href="">Sign-up</a></li>
                  <li><a href="">Staff</a></li>
               </ul>
            </nav>
          </div>
        </header>
        <div class="slideshow">
          <div class="fadein">
            <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
            <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
            <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
          </div>
        </div>
        <div class="A3L_Slogan">
          <div class="slogan_title">
            Hardcore Roleplay Community
          </div>
          <div class="slogan_catchphrase">
            The next level roleplay experience
          </div>
          <div class="slogan_hr">
            <hr class="style14">
          </div>
        </div>
<div class="flexbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</div>
      </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在2列中创建4个框的最简单方法（不需要flex）是在元素中放置50％宽度的内联块，并删除可能导致父项额外空格的所有内容：

HTML：

<div class="parent">
    <div class="child">
        <div class="boxcontent">1</div>
    </div>
    <div class="child">
        <div class="boxcontent">2</div>
    </div>
    <div class="child">
        <div class="boxcontent">3</div>
    </div>
    <div class="child">
        <div class="boxcontent">4</div>
    </div>
</div>

的CSS：

.parent {
    width: 100%;
    max-width: 1000px; // limit width for extra large screens
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    margin: 0 auto; // to center on less than 100% width
}

.child {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    box-sizing: border-box;
    padding: 100px;
}

.boxcontent {
    font-size: 16px;
    line-height: 20px;
    background-color: red;
    height: 25%;
}

对于移动设置子宽度为100％;

相关问题
最新问题