1
私はテーブルを作ろうとしています。異なる長さのテキストを変更すると、他のものも移動します。ここに私のフィドルがあることをもっと明確にするために。他のdivを移動させないようにテキストを停止する
https://jsfiddle.net/5uys473u/
あなたは「リチャードは」名前を使用するよりも右の「ジェームズ」を他のテキストを移動名前を使用して見ることができるように。私の質問は、私はそれを修正することができますか？私がそこに入る量/名前は何でも、私はそれが動くのを望んでいない。私はちょうど他のものが "固定"のように留まることを望む。
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;
}
あなたはインラインブロックにそれらのスパンの一部を回すと、CSSでそのサイズを指定することができます。しかし、それはあなたのためのサイジングを処理するので、実際にはこれのためにテーブルを使用する方が良いかもしれないようです。 – Jeremy
@Jeremyありがとうございます。しかし、長さに関係なくテキストがそこに追加された場合は、すべてを所定の位置にとどめておきたいだけです。 –
それから、インラインブロックルートはおそらくあなたが行きたい場所です（私は@ musheng-wuがすでにそのアプローチで答えを加えているのを見ています）。 – Jeremy