HTML并排放置两个div

Question

如何将两个div并排放在CSS上，如下图所示？

最终我希望左边的div可以滚动，但这不是必需的。

我最重要的是将它们并排放置。

Answer 1

并排divs：

display: inline-block; 

//将此添加到两个div

http://www.w3schools.com/cssref/pr_class_display.asp

可滚动的div：

overflow: scroll; 

//将此添加到左侧div

http://www.w3schools.com/cssref/pr_pos_overflow.asp

示例：

https://jsfiddle.net/90h5c20x/

Answer 2

将你的div放入普通父级，然后你必须使用css。对于左侧div，请添加style="float: left"。对于第二个，请写style="float: right"。

Answer 3

您可以将两个div包装在另一个div中，并将flexbox应用于包装器

HTML：

<div class="wrapper">
   <div class="div1">
      <!-- div code here -->
   </div>
   <div class="div2">
      <!-- div code here -->
   </div>
</div>

CSS：

.wapper{
  display: flex;
  flex-flow: row wrap;
}

这比内联块和浮动更顺畅，并且具有移动响应性。它还允许滚动第一个div。

Answer 4

Flexbox非常酷，非常优雅，但它在生产环境（IE9及更低版本）中无法正常工作，没有任何修复/黑客攻击。因此，我提供了这个跨浏览器的答案。

这是你的HTML：

<h1>Title</h1>
<div class="wrapper">
  <div class="div1">
    <!-- div code here -->
  </div>
  <div class="div2">
    <!-- div code here -->
  </div>
</div>

使用以下CSS：

.wrapper {display: table;}
.div1, .div2 {display: table-cell;}

以下是工作代码：http://codepen.io/anon/pen/xVMprO

以下是溢出代码：http://codepen.io/anon/pen/NNoXBJ