动态对齐 div 并排答案

【问题标题】：Dynamically align divs side by side动态对齐 div 并排
【发布时间】：2016-07-10 18:09:16
【问题描述】：

我正在研究亲子关系。我有一个公司模型和产品模型，当我拉取公司产品的记录时，我希望它们并排对齐，因为默认情况下 div 垂直对齐，如何使它们水平对齐？我已经看到了几个答案，它们显示了如何静态地执行此操作，但由于这些是动态记录，我如何使用动态生成的 div 将它们并排对齐？

@foreach($product as $products)
  @if($company->id === $products->company_id)
     <div class="flow">{!! Html::linkRoute('companyContactView', $products->productname, $products->company_id) !!}</div>  |  
  @endif
@endforeach

【问题讨论】：

试过float : left;
我试过了，没用。谢谢。
如果你尝试了一些不起作用的东西，最好把它放在你的问题中，以便其他人会尝试更正你的代码。没有工作不是那么有表现力..
对不起，这就是我添加课程的原因，这是它的内容：.flow{ float: left; width:auto; clear:left; }
谢谢。我让它工作了。感谢您的支持。我刚刚删除了粗体标签。我不知道为什么会出现问题。

标签： javascript html css dynamic alignment

【解决方案1】：

假设 flow 是父级，此 CSS 规则可能会有所帮助。

.flow {
  white-space: nowrap;      /* make them stay on 1 line all the time */ 
}

.flow > div {
  display: inline-block;
  vertical-align: top;      /* or middle, or ..., how you want them to align */
}

【讨论】：

【解决方案2】：

允许多个 div 并排的首选方法是应用 CSS 规则 display: inline-block。这允许您指定宽度和高度。

看看 w3schools 的这个例子： http://www.w3schools.com/css/css_inline-block.asp

我鼓励您使用“自己尝试”示例来了解 inline-block 的工作原理以及为什么它比使用 float 更受欢迎。

【讨论】：

我唯一要补充的是，您需要以 px 为单位指定宽度和高度，而不是 %。