jquery - 阻止文本移动其他 div

Question

我正在尝试制作一个表格，如果我更改长度不同的文本，它也会移动其他内容。为了更清楚，这是我的 fiddle 。

https://jsfiddle.net/5uys473u/

如您所见，使用名称“Richard”比使用名称“James”将其他文本移到更右的位置。我的问题是我该如何解决？无论我在那里输入什么数量/名称，我都不希望它移动，我只想让其他东西保持“固定”状态。

HTML

<div class="col-md-6">
    <h3>Testing Box</h3>
    <div class="borderBox test">
        <div id="scroll-scroll">
            <div class="info">
                <div class="information">
                    <span class="spantext2">#000001</span>
                    <span class="fixed-names">Name: <span class="spantext2">Richard</span></span>
                    Amount: <span class="spantext2">5,000$</span>
                    <span class="icon-margin2"><img src="/static/images/ic_compare_arrows_black_24dp_1x.png"></span> Date: <span class="spantext2">01/07/2017</span> Status: <span class="spantext2">Pending</span> New Amount: <span class="spantext2 floating">5,000$</span>
                </div>
                <div class="separate-line"></div>
            </div>
            <div class="info">
                <div class="information">
                    <span class="spantext2">#000001</span>
                    <span class="fixed-names">Name: <span class="spantext2">James</span></span>
                    Amount: <span class="spantext2">5,000$</span>
                    <span class="icon-margin2"><img src="/static/images/ic_compare_arrows_black_24dp_1x.png"></span> Date: <span class="spantext2">01/07/2017</span> Status: <span class="spantext2">Pending</span> New Amount: <span class="spantext2 floating">5,000$</span>
                </div>
                <div class="separate-line"></div>
            </div>
        </div>
    </div>
</div>

CSS

.col-md-6{
    font-family: Norwester;
    color: #891b15;
}
.borderBox{
    border: 2px solid #ccc;
    height: 500px;
    border-radius: 15px;
}
.test{
    height: 162px;
    overflow: hidden;
}
#scroll-scroll{
    overflow-y: scroll;
    height: 100%;
}
.information{
    margin-top: -5px;
    margin-bottom: 5px;
    margin-left: 3px;
}
.info{
    font-size: 16px;
    color: #2f2f2f;
    margin-bottom: 13px;
    margin-top: 13px;
}
.spantext2{
    margin: 0px 11px;
    color: #891b15;
}
.separate-line{
    border-bottom: 2px solid #ccc;
    margin: 0 13px 0px 13px;
}
.icon-margin2{
    margin: 0 18px;
}
.floating{
    float: right;
    margin-right: 20px;
}

Answer 1

我认为你只需要设置“名称”的宽度。

试试这个。

.fixed-names > .spantext2 {
  width: 80px; /* fixed size you want */
  display: inline-block;
}