将两个div放在一起，如果有足够的空间则居中

Question

我想将一个随机数量的div放在彼此相邻的中心，但是如果没有足够的空间用于最后一个，那么它最多不在中心。我想要那样的东西：

▢▢▢▢（＆lt; - 没有更多的空间，现在将div放下 - 而不是;）
▢▢▢▢（＆lt; - 不再占用空间，现在将div放下 - ＆gt;）
▢

怎么办？请告诉我，我明白了

Answer 1

您可以使用固定的容器宽度以及其中的任何类型的元素。 我创造了一个小提琴，你可以看看Twitter Bootstrap Scaffolding。

Flux提到了flexbox，好点，我更新了小提琴。

https://jsfiddle.net/661hktxf/2/

<强> HTML

<AnimatedComponent />

<强> CSS

<div class="container-items clearfix">
  <div class="inner">
    <div class="item">
      item item item item item item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
    <div class="item">
      item
    </div>
  </div>
</div>

Answer 2

有多种解决方案。例如。通过设置居中的包装器并在其中留下浮动的项目。

＆＃13;

＆＃13;

.wrapper {
  width: 400px;
  margin: 0 auto;
}

.item {
  width: 80px;
  margin: 10px;
  float: left;
  height: 80px;
  background-color: lightblue;
}

＆＃13;

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用CSS float或flexbox

CSS float 示例： demo

HTML

  <section class="center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <footer class="clear"></footer>
  </section>

CSS

.container {
    margin: auto;
    width: 500px;
}

div {
  width: 150px;
  float: left;
}

.clear {
  overflow: auto;
  clear: both;
}

使用 flexbox ，您可以将该部分居中并删除clearfix页脚。

示例：demo

CSS

section {
  width: 500px; 
  margin: auto;
  border: 1px solid red;
}

.container {
  display: flex;
  flex-flow: row wrap;
}


div {
  border: 1px solid black;
  width: 150px;
}

Answer 4

这是我做的一个基本的...眼睛容易，容易理解。如果您希望它具有响应性，虽然它是一个不同的故事，您将需要媒体查询。将高度更改为所需高度或最小高度。在它那里取下背景颜色，这样你就可以看到它的样子。

＆＃13;

＆＃13;

#wrapper {
  width:1440px;
}
.cols {
  width:20%;
  height:300px;
  position:relative;
  float:left;
  margin:1.1%;
  background-color:#333;
}

＆＃13;

<div id="wrapper">
  <div class="cols">1</div>
  <div class="cols">2</div>
  <div class="cols">3</div>
  <div class="cols">4</div>
  <div class="cols">5</div>
  <div class="cols">6</div>
  <div class="cols">7</div>
  <div class="cols">8</div>
  <div class="cols">9</div>
  <div class="cols">10</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以使用display:table和margin:auto;或inline-table，inline-flex，inline-block和text-align来设置包装器的中心位置。

为孩子们提供

inline-block，inline-table，inline-flex或float。

display值的选择取决于预期的全局行为

这里有几个带有不同数量的框的示例（在整页中播放片段以查看调整窗口大小的行为）：

• table + float

ul,

li {

  /* reset */

  padding: 0;

  margin: 0;

  display: block;

}

ul {

  display: table;
  margin: auto;

}

li {

  width: 75px;

  height: 75px;

  background: lightblue;

  margin: 5px;

  float: left;

}

<ul>
  <li>item box</li>
  <li>item box</li>
</ul>
<hr/>
<ul>
  <li>item box</li>
  <li>item box</li>
  <li>item box</li>
  <li>item box</li>
  <li>item box</li>
  <li>item box</li>
  <li>item box</li>
  <li>item box</li>
</ul>

inline-flex + inline-block

body {
  text-align:center;
}
ul, li {
  /*reset*/
  padding:0;
  margin:0;
  display:block;
}
ul {
  display:inline-flex;/* or inline-block or inline-table */
  flex-wrap:wrap;
  align-items:center;
}
li {  
  width:78px;
  height:78px;
  background:lightblue;
  margin:5px;
  /* display:  inline-block; or float:left; or */
  display:inline-flex;
  justify-content:center;
  align-items:center
}

<ul>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
</ul>
<hr/>
<ul>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
</ul>
<hr/>
<ul>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
  <li> item box </li>
</ul>

您可以切换包装的显示，并显示和浮动儿童，以使用最适合您的儿童造型需求的方法。

这里的想法是让内容缩小内容并使自身居中（或通过text-align集中），并在内容变大时增长。 无需在包装器上设置这些方式的宽度