2

所以我得到了这个由 200 到 200 的 div 列表，但它们现在垂直显示我非常希望我的整个网站像 Metro 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/

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

4

6 回答 6

3

给white-space: nowrapbody 标签和display: inline-blockdiv 标签就可以了。

工作小提琴

于 2013-06-16T03:55:36.233 回答
1

内联元素不能有固定的宽度或高度。

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

display:inline-block是两全其美的;)

于 2013-06-16T03:41:06.103 回答
1

您可以将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;
}

请查看演示。如果你有兴趣，你可以点击这里和这里。

于 2013-06-16T04:00:47.380 回答
0

完全取决于你想要什么。这将使它们水平移动直到宽度的末端。 提琴手

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;

}
于 2013-06-16T03:42:16.247 回答
0

您可以通过几种不同的方式解决此问题：

  1. 更改display: inline;为如图display: inline-block所示

  2. 添加float: left;如下所示

  3. 保持一切原样并向您的 div 添加一些内容，如下所示

于 2013-06-16T03:47:17.693 回答
0

自从我们留下表格以来，我们一直在使用浮动进行布局。这是一个古怪的解决方案，经常会引起麻烦，但如果你知道自己在做什么，它就会起作用。

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

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

    }
于 2013-06-16T03:43:05.313 回答