动态卡（div）的居中网格，里面有更多的块元素

时间：2016-12-09 11:09:18

标签： css

我希望动态生成的固定大小的网格网格在可变宽度的容器中水平居中，基本上是这样的：https://foodgawker.com/

我的问题类似于Center a grid of Divs (dynamically generated)或How to center a grid of divs?（示例来自那里），除了他们都建议使用display: inline-block而不是float : left，这只会有效因为卡内没有其他块元素。

以下是上一个问题的示例，在卡片中添加了一个块元素，整个布局中断：http://jsbin.com/vozusukigo/1/edit?html,css,output。 foodgawker.com也使用float : left，而不是display: inline-block。

这是一个JS Bin for your convenience，我很感激任何帮助。

编辑：最后一行应该与示例中的左对齐。令我恐惧的是similar question接受的答案使用了JQuery（并且没有任何flexbox答案有固定的大小差距）。

3 个答案:

答案 0 :(得分：3)

由于CSS3中的Flexbox概念，这些解决方案现在变得非常简单。

https://jsbin.com/vetanocaxi/1/edit?html,css,output

使用相同的HTML，CSS可以写成如下

.ct {
  background-color : #ffff00;
  display: flex;
  justify-content: flex-start; /* center if you want to the center */
  align-items: center;
  flex-wrap: wrap;
}

.el {
  width : 50px;
  height : 50px;
  background-color : #ff9999;
  margin : 5px;
  display: flex;
  justify-content: center; /* center inside flex items */
  align-items: center; /* center inside flex items */
}

不需要floats＆amp;更好的是，您可以轻松地在单个弹性项目中具有复杂的结构，而不会影响外部布局结构。

.ct {
  background-color : #ffff00;
  display: flex;
  justify-content: flex-start; /* center if you want to the center */
  align-items: center;
  flex-wrap: wrap;
}

.el {
  width : 50px;
  height : 50px;
  background-color : #ff9999;
  margin : 5px;
  display: flex;
  justify-content: center; /* center inside flex items */
  align-items: center; /* center inside flex items */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="ct">
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
    <div class="el"><p>flex</p></div>
  </div>
</body>
</html>

答案 1 :(得分：1)

Flexbox can be used to achieve this effect like this: http://jsbin.com/vunubuqobo/edit?html,css,output

Main assumption is a fixed width for all cards. A small nuisance is a bunch of media queries to set .center_wrapper's width right, but that is easy to overcome with Less/SCSS/etc.

Note: use jsbin link above to check out responsiveness.

.cards_wrapper {
    background: red;
}

@media(min-width: 122px) {
  .center_wrapper { width: 122px; }
}

@media(min-width: 296px) {
  .center_wrapper { width: 244px; }
}

@media(min-width: 416px) {
  .center_wrapper { width: 366px; }
}

@media(min-width: 524px) {
  .center_wrapper { width: 488px; }
}

@media(min-width: 646px) {
  .center_wrapper { width: 610px; }
}

.center_wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin: 0 auto;
  background: yellow;
}

.card {
  height: 100px;
  width: 100px;
  border: 1px solid;
  margin: 10px;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>



<div class="cards_wrapper">
    <div class="center_wrapper">
        <div class="card">
          
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
        <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
        <p>block element</p>
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
      <div class="card">
            <img src="./Index - My ASP.NET MVC Application_files/noImageAvailable.png">
        </div>
    </div>
</div>  
</body>
</html>

答案 2 :(得分：0)

说实话，我使用display: inline-block看不到任何问题，并且在重复的div中有块元素。将最后一行左对齐也很简单，不需要单行JavaScript或任何复杂的解决方法。

根据您发布的链接，您可以使用以下HTML结构和CSS代码实现布局

＆＃13;
＆＃13; 
body {
  background: #eee;
}
#wrapper {
  font-size: 0;
  padding: 10px 0;
}
.item {
  width: calc(25% - 4px);
  background: white;
  overflow: hidden;
  border-radius: 3px;
  display: inline-block;
  font-size: initial;
  margin: 2px;
}
p {
  padding: 4px 20px;
}
img {
  width: 100%;
}
＆＃13; 
<div id="wrapper">
  <div class="item">
    <img src="https://photo.foodgawker.com/wp-content/uploads/2016/12/2845923.jpg" alt="" />
    <p>All the nutty deliciousness of pecan pies - these no bake Rice Krispie Pecan Pie Cookies are vegan-friendly & dairy-free friendly!</p>
  </div>

  <div class="item">
    <img src="https://photo2.foodgawker.com/wp-content/uploads/2016/12/2845735.jpg" alt="" />
    <p>This Barbecue Chicken Cornbread Casserole is an easy dinner that comes together in just 15 minutes!!</p>
  </div>

  <div class="item">
    <img src="https://photo.foodgawker.com/wp-content/uploads/2016/12/2845542.jpg" alt="" />
    <p>Vegan Meringue Kisses, made using aquafaba</p>
  </div>

  <div class="item">
    <img src="https://photo2.foodgawker.com/wp-content/uploads/2016/12/2845725.jpg" alt="" />
    <p>Healthy spicy creole pulled pork made in the slow cooker! {Gluten Free, Dairy Free, Paleo}</p>
  </div>

  <div class="item">
    <img src="https://photo.foodgawker.com/wp-content/uploads/2016/12/2845855.jpg" alt="" />
    <p>Praline chocolates with a crispy dark chocolate coating and a soft caramelized nuts filling. Chocolatey, nutty and insanely delicious!</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题