Question

我尝试使用display inline-block来获得3列，但第3列来自不同的行：

.wrapper {
   width: 100%;
}
.column {
    display: inline-block;
    min-height: 150px;
    width: 33.33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

无法弄清楚原因。

Answer 1

我不知道这正是您所需要的，我已使用inline-block删除font-size:0的默认空格并添加box-size property您无需更改宽度{{1}宽度请查看代码段

＆＃13;

33.3% to 33%

＆＃13;

 .wrapper {
  width: 100%;
  font-size: 0;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  margin-bottom: 8px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

＆＃13;

Answer 2

默认inline-block将空格计为元素。您可以通过两种不同的方式完成此任务：

方法（使用字体大小）

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
  font-size:0px;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
  font-size:16px;
}

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

删除额外空间的方法

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: 33.33%;
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
}

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>

根据您的评论，您需要margin-right:5px并实现相同的目标。为此，您可以使用calc格式的宽度。检查下面的代码段

*,*:after,*:before {
  box-sizing: border-box;
}
.wrapper {
  width: 100%;
}
.column {
  display: inline-block;
  min-height: 150px;
  width: calc(33.33% - 5px);
  width: -moz-calc(33.33% - 5px);
  width: -webkit-calc(33.33% - 5px);
  border: 1px solid black;
  /*min-width: 300px;*/
  margin-bottom: 8px;
  margin-right: 5px;
}

<div class="wrapper">
  <div class="column">abc</div><!--
  --><div class="column">def</div><!--
  --><div class="column">ghi</div>
</div>

Answer 3

默认情况下，浏览器会在两个div之间呈现内联的间隔。

使父width:100%,和子width:33.33%不会让孩子适合父母，因为DOM会计算子div之间的差距。

要使子div适合父级，您需要修改小于33.33％的宽度。

如果您仍想使用33.33％的宽度。试试这个

Link For reference

Unexpected gap between div inline-block

希望这会有所帮助..

Answer 4

解决此问题的一种简单方法是将.wrapper设置为display: table;并将其子项设置为display: table-cell;。请参阅下面的示例了解结果。

＆＃13;

.wrapper {
   width: 100%;
   display: table;
}
.column {
    display: table-cell;
    min-height: 150px;
    width: 33.33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
}

＆＃13;

<div class="wrapper">
  <div class="column">abc</div>
  <div class="column">def</div>
  <div class="column">ghi</div>
</div>

＆＃13;

Answer 5

如果您在大屏幕（1600,1920）工作，请使用媒体查询。并且没有任何关于保证金和其他方面的变化。

请更新此属性

对于＆lt; 1366屏幕分辨率使用此css

width:32.90% //instead of 32.90% you may use width: 32%;

对于＆gt; 1366宽度：33％正在工作

.column 类

中的

width: 33%;

所以列类看起来像

.column {
        display: inline-block;
        min-height: 150px;
        width: 33%;
        border: 1px solid black;
        min-width: 300px;
        margin-bottom: 8px;
      }

因为它的1px边框被div包围。它们是默认边距：8到正文标记。

宽度：33％在1366屏幕分辨率下无效。所以在这里你必须使用宽度：32.90％32％

Answer 6

更改宽度并添加Box-Sizing将对您有所帮助。

.column {
    display: inline-block;
    min-height: 150px;
    width: 33.1%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

Answer 7

使用表格，最佳选项

没有宽度，没有浮动

table{table-layout:fixed;width:500px;border-collapse:collapse;text-align:center;}

<table border="1">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Answer 8

尝试将div保留在编辑器中的一行。

<div class="wrapper"> <div class="column">abc</div><div class="column">def</div><div class="column">ghi</div> </div>

Answer 9

可以使用flex，flex非常适合制作响应式div。这是一个简单的例子。

--- HTML ----

<div class="flex-wrapper">
  <your-element class="item"> 1 </your-element>
  <your-element class="item"> 2 </your-element>
  <your-element class="item"> 3 </your-element>
</div>

--- CSS ---

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;  // if you want to lots of items, will be wrapped
}
.item {
  width: 33.3%;
}

如果您的商品有 margin，您可以这样计算。

.item {
  margin: 5px;
  width: calc(33.3% - 10px);
}

示例：

希望能帮到你。

Answer 10

将以下属性用于@Override public boolean onPrepareOptionsMenu(Menu menu) { MenuItem item = menu.findItem(R.id.menu_id); Linearlayout rootView = (LinearLayout)item.getActionView(); YourControlClass control = (YourControlClass) rootView.findViewById(R.id.control_id); return true; } 类

column

<强>原因

.column { display: inline-block; min-height: 150px; width:32%; float:left; margin-left:4px; border: 1px solid black; min-width: 300px; margin-bottom: 8px; }属性会将您的div对齐在左侧
float:left;属性的宽度为32％，而不是33.33％ 1px你正在分配到边界，需要容纳宽度本身。
width:32%;属性将在div之间添加间距，这是为了精确。

Answer 11

您的列类需要一些小的修复，浮动和宽度更改：

.column {
    display: inline-block;
    float: left;
    min-height: 150px;
    width: 33%;
    border: 1px solid black;
    min-width: 300px;
    margin-bottom: 8px;
  }

在3列中划分3个div而不使用float和flex

11 个答案: