CSS-如何水平对齐div？

Question

所以我得到了这个200格的div列表，但它们现在垂直显示了，我非常希望我的整个网站像地铁ui一样水平驱动

body {
    background-color: blue;
}

div {
    display: inline;
    background-color:black;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 5px;
    border: solid 2px yellow;
}

如果我应用display：inline，它们都会缩小？？？ 为什么这样做：取消注释显示：内联； 在jsfiddle CSS中看到

http://jsfiddle.net/uVY5V/3/

什么是将所有内容水平或内联放置的好方法

Answer 1

给white-space: nowrap给body标签，并display: inline-block给div标签就可以了。

工作小提琴

Answer 2

内联元素不能具有设置的宽度或高度。

块元素不能并排（ float是作弊：p）

display:inline-block是两全其美的；）

Answer 3

您可以将text-align: justify用作div.wrapper ，并且可以将display:inline-block用作div列表。 像这样：

的HTML

<div class="wrapper">
  <div id="search_tile" class="search_tile"></div>
    <div id="timeline_tile" class="timeline_tile">  </div>
    <div id="conversations_tile" class="conversations_tile"></div>
    <div id="source_tile" class="source_tile"></div>
    <div id="11_tile" class="demo_11_tile"></div>
    <div id="14_tile" class="demo_14_tile"></div>
    <div id="12_tile" class="demo_12_tile"></div>
    <div id="13_tile" class="demo_13_tile"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

的CSS

body{
background-color: blue;
}
.wrapper {
  letter-spacing: -4px;
  word-spacing: -4px;
  font-size: 0;
  text-align: justify;
}
.wrapper:after {
  content:"";
  display:inline-block;
  width: 100%;
}

.wrapper div{  
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
    background-color:black; 
    width: 200px; 
    max-width: 200px;
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;
    -webkit-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -moz-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -ms-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -o-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
}
.wrapper .placeholder {
  width: 200px;
  height: 0;
  border: none;
  background:none;
}

请观看演示 。 如果您有兴趣，可以单击此处和此处 。

Answer 4

取决于您要的是什么。 这将使它们水平移动直到宽度的尽头。 JsFiddle

HTML：

<div id="search_tile" class="search_tile"></div>
<div id="timeline_tile" class="timeline_tile"></div>
<div id="conversations_tile" class="conversations_tile"></div>
<div id="source_tile" class="source_tile"></div>
<div id="11_tile" class="demo_11_tile"></div>
<div id="14_tile" class="demo_14_tile"></div>
<div id="12_tile" class="demo_12_tile"></div>
<div id="13_tile" class="demo_13_tile"></div>

CSS：

body
{
background-color: blue;
width:100%;
}

div{  
    /*display: inline;*/
    display:inline-block;
    background-color:black; 
    width: 200px; 
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;

}

Answer 5

自从我们抛弃表格以来，我们几乎一直在使用浮点数进行布局。 这是一个古怪的解决方案，通常会引起麻烦，但是如果您知道自己在做什么，它就会起作用。

人们越来越多地转向浮动的一种有趣的替代方法是将元素的显示值设置为inline-block。

div{  
        display: inline-block;
        background-color:black; 
        width: 200px; 
        height: 200px; 
        margin: 10px; 
        padding: 5px; 
        border: solid 2px yellow;

    }

Answer 6

您可以通过以下几种方法解决此问题：

1. 更改display: inline; 到display: inline-block如图这里

2. 添加float: left; 如这里所示

3. 保留所有设置的，是和一些内容添加到您的div如图所示这里