将div除以2列

Question

我已经看到了这个问题的一些解决方案但是当我在div中添加一个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>

的CSS：

//spliting the div to 2 columns
#container
{
  border-style:solid;
  border-width: 1px;
  border-color: green;
  padding: 10px;
  margin: 10px
}
#categoriesContainer
{
  width: 15%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  float: left;
}
#products-container
{
  border-style: solid;
  border-width: 1px;
  width: 85%;
  border-color: red;
}

//for the angular2 compoennts
#prodcut
{
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
#create-product
{
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
#create-product-button
{
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

这就是我想要的东西：（这些卡片只会在红色的喷射中出现。）

问题：

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

2. 我可以在不影响任何内容的情况下避免使用此代码：

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

为：

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

非常感谢！

Answer 1

使用flexbox

进行简单操作

*{box-sizing:border-box;}

#wrapper {
  display: flex;
}

#left, #right {
  padding: 16px;
}

#left {
  width: 15%;
  background: red;
}

#right {
  width: 85%;
  background: blue;
}

<div id="wrapper">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

使用float和box-sizing

进行简单操作

_{您可能还希望在父元素上使用.clearfix class}

*{box-sizing:border-box;}

#left, #right {
  float: left;
  padding: 16px;
}

#left {
  width: 15%;
  background: red;
}

#right {
  width: 85%;
  background: blue;
}

<div id="wrapper">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

使用display:table（跨浏览器）

#wrapper {
  display: table;
  width: 100%;
  border-collapse: collapse;
} 

#left, #right {
  display: table-cell;
  padding: 16px;
}

#left {
  width: 15%;
  background: red;
}

#right {
  background: blue;
}

<div id="wrapper">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

Answer 2

您是否为子节点尝试了float:left，为父节点尝试了clear:both, content: ''？

我的意思是您错过了float:left

的#products-container

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

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