Question

我想创建一个＆＃34;记分卡＆＃34;网格输出一些数据。如果每个div.item中的数据都是相同的高度，那么每个div.item上留下一个简单的浮点数会提供一个漂亮的均匀布局，可以根据浏览器大小很好地扩展和缩小。

如果数据是可变的，每个div中的行数不同，那么元素浮动的方式会产生不均匀且混乱的输出。请参阅下面的代码示例如果使用以下内容创建页面，请将浏览器的大小调整为大约800px宽，以便框1,2和3创建＆＃34;行＆＃34;在顶部，然后是4,5和6.如何让7下拉到下一行，以便创建一行以及8和9？

显然，如果你调整浏览器的大小以便每行显示4个div，则数字9是我要在5以下分解的元素。是否有一些明显的我缺少或者我需要使用一些Javascript来实现这一点吗？

＆＃13;

div.item{
  float:left;
  width:220px;
  background-color:#DBDBDB;
  margin:8px;
}

h1, p{
  padding:4px;
  margin:0;
}

＆＃13;

<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

＆＃13;

Answer 1

将"float: left;"更改为"display: inline-block; vertical-align: top;"

它将以你想要的方式工作。

示例：http://jsfiddle.net/yK9eY/2/

div.item {
    display: inline-block;
    *display: inline;
    width:220px;
    background-color:#DBDBDB;
    margin:8px;
    vertical-align: top;
    zoom: 1; 
}

h1, p {
    padding: 4px;
    margin: 0;
}

<div class='item'>
  <h1>1</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>2</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>3</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>4</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>5</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>More Content</p>
  <p>More Content</p>
</div>

<div class='item'>
  <h1>6</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>7</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>8</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

<div class='item'>
  <h1>9</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

Answer 2

用容器包裹所有div并向其提供.container { overflow: hidden; }或.container { overflow: auto }。第二种方法是用容器包装所有div并将另一个div放到所有div的底部，并给出一个类名称，例如“clear”并将其设置为样式.clear { clear: both }

CSS浮动，清除浮动元素的“行”

2 个答案: