Question

我有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？

请参阅此Demo请阅读JavaScript代码控制台中的文字。

Answer 1

使用inline-block

div.demo
{
  display:inline-block;
 width:312px;
}

Answer 2

用于 table和table-cell属性，就像这样

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

的 Demo

第二个选项符合到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;}

<强> Demo2

Answer 3

让子div在一个父div中，给父级一个宽度，并给父级divs加上或者总数少于父级，并将它们全部浮动。

<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>

使用inline-block或float left将行包装在同一行中

3 个答案:

的 Demo