0

我有 3 列宽度相等，但有时我可能有不相等的宽度，所以我使用像素而不是百分比来定义宽度，并且我想要在任何分辨率下在同一行中的所有三列，但最后一列低于该行。此外，中间的左边距和右边距假设等于 32px。

  | first box according to this line            | last box according to this line
+-|---------------------------------------------|-+
| +-----------+   +------------+   +------------+ |
| |    312px  |   |  312px     |   |   312px    | | 
| +-----------+   +------------+   +------------+ |
+-|---------------------------------------------|-+
  +------wrapper width 1001 pixels--------------+
|                                                 |
+-----------outer width 1100 pixels---------------+

如何实施才能得到这个？我应该使用什么方法进行最佳实践float or inline-block？

请参阅此演示请阅读 JavaScript 代码控制台中的文本。

4

3 回答 3

2

采用inline-block

div.demo
{
  display:inline-block;
 width:312px;
}
于 2013-05-01T09:46:06.357 回答
2

习惯 table和table-cell属性像这样

.parent{width:1001px;display:table;}
.child{display:table-cell;vertical-align:top;}

演示

第二个选项是根据Mr. @Harshit Tailor 

.main{margin-top: 20px; width: 1001px;background:green; text-align:center;font-size:0;}
.incols{display:inline-block; vertical-align:top;text-align:left; width: 308px;font-size:14px; border: 2px solid red;
box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
}
.two{margin: 0 32px;}

演示2

于 2013-05-01T10:04:38.760 回答
0

将子 div 放在一个父 div 中，给父 div 一个宽度，并给父 div 宽度加起来或小于父 div，然后将它们全部浮动。

<style type="text/css">

.parent {

    width: 900px;
}

.child1, .child2, .child3 {

    width: 300px;
    float: left;
}

</style>



<div class="parent">

<div class="child1">I am a child!</div>
<div class="child2">I am a child!</div>
<div class="child3">I am a child!</div>

</div>
于 2013-05-01T10:09:53.180 回答