HTML并排放置两个div [关闭]答案

【问题标题】：HTML put two div side by side [closed]HTML并排放置两个div [关闭]
【发布时间】：2017-07-19 02:49:13
【问题描述】：

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

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

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

【问题讨论】：

不要指望我们为您编写代码，展示一些努力，或者您在发布问题之前确实尝试过寻找解决方案。
虽然可以进行两列布局，但可能无法让它们匹配高度并且仅使用 CSS 滚动。通常较短的高度以某种方式伪造，较高的高度尽可能高。

标签： html css

【解决方案1】：

并排 div：

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/

【讨论】：

【解决方案2】：

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

【讨论】：

Flexbox 是一个更优雅的解决方案，但是 IE 不支持 flexbox：caniuse.com/#feat=flexbox。 “更好”有点直言不讳，而否决有效的解决方案是……嗯……至少令人失望。

【解决方案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;
}

这比 inline-block 和浮动更流畅，并且是移动响应的。它还将允许滚动第一个 div。

【讨论】：

这在 IE 中不起作用：caniuse.com/#feat=flexbox

【解决方案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

【讨论】：

不，不工作，溢出假设发生在哪里？ ...你最终需要一个额外的包装器：codepen.io/anon/pen/NNoXBJ 即使你使用 flex ....
很好的溢出解决方案！我认为溢出是“可选的”，所以我故意将其排除在外以保持清洁。