从中心流向两侧的内容（使用CSS）

Question

我正在处理有两列需要居中的布局。每列需要增长以根据其子项内容调整其宽度。

对我来说，问题是列需要从中心到侧面增长，并且它的所有子项需要具有相同的高度和宽度。

我需要什么：

正如你所看到的那些盒子都是一样的高度和高度。宽度。我不想手动设置这些值，我希望所有方框都采用其中最长文本的大小（如2）

这种布局不是为网站设计的，现在我有点试图让它像一个人一样工作。我尝试使用flexbox阅读this和this，但它似乎只适用于固定宽度的儿童。

我尝试过两列display: inline-block和＆＃39; text-align：center`：这会使列居中但不解决其子宽度/高度的问题

我知道可能很难理解这个问题，但我很欣赏任何想法或方向。我正在考虑简单的CSS / SASS解决方案，但会听取javascript替代方案。

Answer 1

前几天我碰巧做了类似的事情。 我觉得这是最好的部分答案;它解决了布局问题，但我认为你会需要JavaScript 来动态地增加列的宽度。也许其他人可以将这个答案与一些JS（我不知道JS足够好回答）结合起来，以实现你所寻求的目标。但是请注意，此处的宽度是百分比，因此在某种意义上，当您重新调整浏览器窗口大小时，执行会增长。

此外，我发现您的问题有点令人困惑，因为您说不想要手动指定高度值，但您希望这些框的高度相同。发生这种情况的唯一方法是，如果每个框中的内容数量相同，否则您的框将具有不同的高度（或者必须手动指定高度，绝对或相对）。

JSFiddle

HTML （带填充文字）：

<div class="container">
    <div class="left">asdf asdf asdf asdfasdf jkl; jkl; jkl; jkl; asdf</div><div class="right">jkl;<br/>asdf</div>
    <div class="left">asdf asdf asdf asdfasdf jkl; jkl; jkl; jkl; asdf</div><div class="right">jkl;<br/>asdf</div>
</div>

请注意左右内部div之间没有空格。如果添加空格，则div将向下移动到新行。

<强> CSS ：

html, body {
    width: 100%;
    height: 90%;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 12.5% auto;
    position: relative;
}

.left, .right {
    display: inline-block;
    position: absolute;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.left {
    width: 50%;
    background: #aebab1;
}

.right {
    width: 50%;
    left: 50%;
    background: #e2dde1;
}