个人中心
gpt4 book ai didi

html - 如果可以的话，我想让我的 flex box 进入 2 x 2 网格帮助

转载 作者：太空宇宙 更新时间：2023-11-04 01:03:30 25 4
gpt4 key购买 nike

我想使用 flex box 在我的页面中央创建一个由 4 个 block 组成的正方形(如网格)，但它一直给我一个 1 长方形列我可以做些什么来改变它我尝试调整大小但是dosnt 工作，我不知道我的代码中是否有任何其他 css 导致它出现故障，但任何输入都会有所帮助提前感谢

CSS `@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300);
@import url(https://fonts.googleapis.com/css?family=Squada+One);
Body {
  /*background-color:rgb(28, 18, 63);*/
  background-repeat: no-repeat;
  background-image: url("https://www.3d-wallpapers.info/wp-content/uploads/3D-Car-Wallpaper.jpg");
  background-attachment: fixed;
}

.div-header {
  background-image: url("http://hdwpro.com/wp-content/uploads/2017/09/Art-Metal-Wallpaper.jpg");
  border: 2px solid red;
  height: 250px;
}

h2,
h1 {
  color: green;
}

.formdiv {
  border: 2px solid red;
  width: 20%;
  float: right;
}

H2 {
  margin: 20px auto;
  color: rgb(151, 1, 1);
  font-size: 3.26em;
  line-height: 1.5;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

.sitename {
  border: 2px solid red;
  width: 40%;
  height: 245px;
  size: 2.23em;
  float: right;
}

.container {
  color: rgb(255, 255, 255);
  padding: 0px;
  border: 1px red solid;
  width: 100%;
  height: 600px;
}

.item {
  /*color:red;
        text-align: center;
        
        margin:5px;
        background: oldlace;
        width:50%;;
        width: 40%;
        justify-content: center;*/
  width: 40vw;
  height: 20vw;
  margin: 5px;
  background-color: red;
}

.hyper {
  background-image: url("http://itsmyideas.com/wp-content/uploads/2013/02/Bugatti-Veyron-2013-2014-Model-picture-with-price-details-520x266.jpg");
  background-repeat: no-repeat;
  height: 400px;
  object-fit: contain;
}

.sport {
  background-image: url("C:/carwebsite/Images/mustty2.jpg");
  background-repeat: no-repeat;
  height: 400px;
}

.exotic {
  background-image: url("C:/carwebsite/Images/lamb32.jpg");
  background-repeat: no-repeat;
  height: 400px;
}

.classic {
  background-image: url("C:/carwebsite/Images/must5 (1).jpg");
  background-repeat: no-repeat;
  height: 400px;
}

.container2 {
  justify-content: center;
  height: 65px;
  background-color: rgb(10, 7, 2);
  padding-top: 0px;
  width: 100%;
}

.container2 {
  justify-content: center;
  height: 65px;
  background-color: rgb(10, 7, 2);
  padding-top: 0px;
  width: 100%;
}

.nav {
  color: rgb(255, 255, 255);
  padding: 15px;
  margin: 5px;
  background: rgba(14, 11, 6, 0);
  margin: 20px;
  border-radius: 5px;
  list-style: none;
  text-align: center;
  padding-bottom: 30px;
  display: inline;
  flex-grow: initial;
}

iframe {
  border: 1px solid red;
  width: 30%;
}

.youvideo {
  margin: 20px auto;
  width: 100%;
  border: 1px solid red;
  justify-content: right;
  padding-top: 50px
}

.button {
  color: green;
  text-align: center;
  padding: .625em 1.25em;
  background: blueviolet;
  border-radius: .35em
}

@media (max-width: 1025px) {
  iframe {
    width: 250px;
  }
  .container {
    display: flex;
    flex-flow: wrap;
    height: 250px;
    width: 75%;
    flex-wrap: wrap;
  }
  .item {
    flex-basis: 0;
    height: 150px;
    padding-top: 0px
  }
}

css flexbox `.container {
  /*display: flex;
        justify-content: center;
        height: 30;
        flex-wrap: wrap;
        margin: 20px auto;
        */
  display: flex;
  flex-wrap: wrap;
}

.item {
  color: red;
  text-align: center;
  padding: 15px;
  margin: 5px;
  background: oldlace;
  width: 25%;
  justify-content: center;
  margin-top: auto;
}

.container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav {
  flex-basis: 200px;
}

.youvideo {
  display: flex;
}

.div-header {
  display: flex;
}

.div-header {
  display: flex;
}
<!DOCTYPE html>

<HTML>

<body>

  <link rel="stylesheet" href="C:\workbenchPrac\prac.css">
  <link rel="stylesheet" href="C:\carwebsite\flexobox.css">


  <div class="div-header">
    <header class="head-image">
      <div class="formdiv">
        <form action="index.html" method="POST">
          <h1>LOG-IN</h1>
          <input type="email" id="mail" name="user-email">
          <input type="password" id="password" name="user-password">


      </div>
      <div class="sitename">
        <h2>Allmotors<br>alliance</h2>
      </div>


  </div>


  </header>
  </div>


  <div class="container2">
    <ul>
      <li class="nav">upcoming races</li>
      <li class="nav">shows</li>
      <li class="nav">News</li>
      <li class="nav">new Releases</li>
    </ul>
  </div>
  <div class="youvideo">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/2UKdf0ot0wA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>


  <div class="container">
    <div class="hyper item"><a class="button">hyper</a></div>
    <div class="sport item"><a class="button">hyper</a></div>
    <div class="exotic item"><a class="button">hyper</a></div>
    <div class="classic item"><a class="button">hyper</a></div>
  </div>


</body>

</HTML>

最佳答案

希望这就是您要找的。 

.main-container{display:flex;  min-height:400px; background:red; }
.inner-first-items{flex:1; display:flex; flex-direction:column;   }
.inner-square-div{flex:1;  border:1px solid #000; text-align:center; }
<div class="main-container">

<div class="inner-first-items">
<div class="inner-square-div">1</div>
<div class="inner-square-div">2</div>


</div>



<div class="inner-first-items">

<div class="inner-square-div">3</div>
<div class="inner-square-div">4</div>


</div>







<div>

关于html - 如果可以的话，我想让我的 flex box 进入 2 x 2 网格帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52696578/

25 4 0
文章推荐： css - 在 Typescript 中定义 CSS Position 接口(interface)的正确方法是什么？
文章推荐： python - 在 Cython 中将指针传递给构造函数
文章推荐： python - 如何选择页面上的随机链接？
文章推荐： node.js - Node 通用池错误[db对象已连接，无法多次调用open]
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com