Javascript 将div划分为2列

我已经看到了一些解决这个问题的方法，但是当我在divs中添加一个angular2组件时，它就不起作用了

以下是我到目前为止得到的信息：

代码：

<div id="container">
  <div id="categoriesContainer">
    <categories (onCategoryChanged)="categoryChanged($event)"></categories>
  </div>
  <div id="products-container">
    <product-details *ngFor="let product of products$ | async" id="prodcut"
                     [product]="product"
                     [canAddProductToCart]="canAddToCart(product.$key) | async"
                     (onAddToCart)="addToCart($event)"></product-details>
    <button md-button
            *ngIf="!showCreateProductComponent"
            id="create-product-button"
            [disabled]="disableCreateProductButton$ |async"
            (click)="showCreateProductComponent=true">
      <i class="material-icons">add</i>
    </button>
    <create-product id="create-product"
                    (onCencel)="showCreateProductComponent=false"
                    (onCreateProduct)="onCreateProduct($event)"
                    *ngIf="showCreateProductComponent"></create-product>
  </div>
  <div style="clear: both"></div>
</div>

这是我想要的：（卡片将只在红色的squer中。）

问题：

<div id="container">
  <div id="categoriesContainer">
    <categories (onCategoryChanged)="categoryChanged($event)"></categories>
  </div>
  <div id="products-container">
    <product-details *ngFor="let product of products$ | async" id="prodcut"
                     [product]="product"
                     [canAddProductToCart]="canAddToCart(product.$key) | async"
                     (onAddToCart)="addToCart($event)"></product-details>
    <button md-button
            *ngIf="!showCreateProductComponent"
            id="create-product-button"
            [disabled]="disableCreateProductButton$ |async"
            (click)="showCreateProductComponent=true">
      <i class="material-icons">add</i>
    </button>
    <create-product id="create-product"
                    (onCencel)="showCreateProductComponent=false"
                    (onCreateProduct)="onCreateProduct($event)"
                    *ngIf="showCreateProductComponent"></create-product>
  </div>
  <div style="clear: both"></div>
</div>

如何解决这个问题，以及当我删除angular2组件并用一些简单的html文本替换它们时，它为什么工作得很好

我是否可以在不影响任何内容的情况下总结此代码：

<div id="categoriesContainer"
   style="width: 15%;border-style: solid;border-width: 1px;border-color: blue;float: left">
<categories (onCategoryChanged)="categoryChanged($event)"></categories>

致：

---

非常感谢

您是否尝试过为子节点使用

float:left

和为父节点使用

clear:两者，内容：'

我的意思是，对于

#产品容器

<div class="container clearfix"> 
  <div id="categoriesContainer" style="float:left" ></div>
  <div id="products-container" style="float:left" ></div>
</div>

关于clearfix类，您可以参考Bootstrap。

Simple using

flexbox

*{框大小：边框框；}
#包装纸{
显示器：flex；
}
#左，#右{
填充：16px；
}
#左{
宽度：15%；
背景：红色；
}
#对{
宽度：85%；
背景：蓝色；
}

左边
正确的

数学兄弟，数学。15%+85%+填充物+边框！=100%

<div class="container clearfix"> 
  <div id="categoriesContainer" style="float:left" ></div>
  <div id="products-container" style="float:left" ></div>
</div>