html - 从中心流向两侧的内容(使用 CSS)

Question

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

我的问题是列需要从中心向两侧增长，并且它的所有子项都需要具有相同的高度和宽度。

我需要什么:

如您所见，所有框的高度和宽度都相同。我不想手动设置这些值，我希望所有框都采用其中最长文本的大小(如 2 中所示)

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

我试过用 display: inline-block 和 '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;
}