Question

我试图制作一张桌子，如果我改变不同长度的文字，它也会移动其他东西。为了使其更加清晰，我的小提琴。

正如你所知，使用名字＆＃34; Richard＆＃34;移动其他文本比使用名称＆＃34;詹姆斯＆＃34;更正确。我的问题是如何解决它？无论我进入那里的数量/名称，我都不想让它移动我只想让其他东西保持原样＆＃34;固定＆＃34;。

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;
}

Answer 2

如下所示更改HTML和CSS并开始利用Flexbox：）

＆＃13;

.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;
    display: flex;
    flex-wrap: wrap;
    width: 1000px;}
.info{
    font-size: 16px;
    color: #2f2f2f;
    margin-bottom: 13px;
    margin-top: 13px;
}
.spantext2{
	margin: 0px 11px;
    color: #891b15;
    flex: 1;
}
.separate-line{
	border-bottom: 2px solid #ccc;
    margin: 0 13px 0px 13px;
}
.icon-margin2{
	margin: 0 18px;
}
.floating{
	float: right;
	margin-right: 20px;
}

＆＃13;

<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="spantext2">Name: Richard</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="spantext2">Name: James</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>

＆＃13;

停止移动其他div的文本

2 个答案: