Html 让中心div定义其他div的宽度

我正在进行一种LED横幅模拟，文本在一行中从右向左运行

我总是显示三个词：最后一个、当前一个、下一个。它们通过一个js定时器进行更新，使当前成为最后一个，下一个成为当前等等

用户应始终关注中心词，因此我希望它位于容器的中心

|最后一次|当前|下一次|

它固定了外部容器的宽度，因此当外部单词很长时，可以将它们切掉，这是可以的。它们应该这样切掉：

la|st|u current|ne|xt

但我只能做到这一点：

|下一步|

我一直在使用float，但它们给了我一个结果，即外部单词粘在框的边框上，如：

| lastnext |

我需要他们坚持中心词，比如：

---

| uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuunext在我的评论之后，我猜到了你的html，并创建了一个非常基本的“led横幅”。
实际上，未来和过去的容器不需要
文本对齐。您应该删除
显示：表
（如果可能的话，不看js很难知道）。
然后，只需添加一个
display:inline块对于您的3个元素，您应该可以。
看

因此，首先我更新了javascript，使其具有更好的调用（使用setInterval而不是从函数内部调用函数）

然后，简单地检查中间单词的大小，将其居中，并将其他两个单词分别推到左边和右边。如果您想在单词之间添加一个小的间距，只需使用我在
左
参数上设置的距离即可。
请参阅。
您是否可以共享html（JSFIDLE会很好）？如果没有js，就很难准确地看到正在发生的事情，但从我看到的情况来看，问题是过去和未来的容器将其
文本对齐
定义为
左
和
右
，这会自动将它们推到一边。这里的技巧是，您可能不知道当前容器的大小，因此如果没有js，很难猜测您希望显示这两个容器到中心的距离。js解决方案对你来说可行吗？嗨，leMoisela，谢谢你的评论。我更新了你的小提琴（你必须先点击10个警报框）。正如你所见，中心词并不总是居中的。用js重新计算就可以了。。。。那是纯粹的魔法！伟大的我正在努力为中间的div添加一个填充物，这样单词就不会互相夹住。通过手动添加a&nsp解决了此问题；但是使用padding/margin会更好检查我是如何在js中添加padding变量的。现在你只要改变这个数字来调节它
#outputfield{
width: 500px;
height: 100px;
overflow: hidden;
text-align: center;
white-space:nowrap;

}

#pastContainer, #futureContainer, #presentContainer{
font-size: 4.5em;
font-style: normal;
font-weight: normal;
white-space:nowrap;
overflow:hidden;
}

#pastContainer, #futureContainer{
background: red;
 }

 #pastContainer {
width: auto;
text-align: right;
overflow: hidden;
color:#CECECE;  
 }

 #presentContainer{
width: auto;
display:inline;
zoom: 1;
display: table;
text-align:center;
overflow:hidden;
background:yellow;
text-shadow: -1px -1px 0px #FFF;

 }

#futureContainer {
width: auto;
text-align: left;
overflow: hidden;
color: #CECECE;
}`

#outputfield{
width: 500px;
height: 100px;
overflow: hidden;
text-align: center;
white-space:nowrap;
background-color:gray;
}

#pastContainer, #futureContainer, #presentContainer{
font-size: 1.5em;
font-style: normal;
font-weight: normal;
white-space:nowrap;
width: auto;
display:inline-block; <-- add this line
overflow: hidden;
}

#pastContainer, #futureContainer{
background: red;
 }

 #pastContainer {
color:#CECECE;  
 }

 #presentContainer{
display:inline;
text-align:center;
background:yellow;
text-shadow: -1px -1px 0px #FFF;
zoom: 1;
 }

#futureContainer {
color: #CECECE;
}`

var i = 1;
var wordsArray = ("xxx Here comes a very long text with short an ververyveryverylong words xxx").split(" ");

changeWords();
window.setInterval(changeWords,1000);

function changeWords(){
    $('#pastContainer').html(wordsArray[i-1]);
    $('#presentContainer').html(wordsArray[i]);
    $('#futureContainer').html(wordsArray[i+1]);      
    i++;
    if(i >= wordsArray.length){i=1;}

    var centerPoint = $('#outputfield').width()/2;
    var myPastWidth = $('#pastContainer').width();
    var myPresentWidth2 = $('#presentContainer').width()/2;
    var elementDephase = myPastWidth + myPresentWidth2 - centerPoint;
    $('#pastContainer').css({left: - elementDephase});
    $('#presentContainer').css({left: (- myPresentWidth2 + centerPoint)});
    $('#futureContainer').css({left: (+ myPresentWidth2 + centerPoint)});  
}