停止移動其他div的文本

我正在嘗試創建一個表，如果我更改不同長度的文本，它也會移動其他內容。爲了更清楚這裏是我的小提琴。停止移動其他div的文本

你可以通過名字就能看出「理查德」移動其他文本不是使用名稱爲「詹姆斯」更多的權利。我的問題是我該如何解決它？無論我輸入什麼數量/名稱，我都不想讓它移動，我只想讓其他東西像「固定」一樣。

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

來源

2017-08-01 Lewis Larf

你可以把其中的一些跨度爲直列塊和CSS指定它們的大小。但看起來實際上使用表格可能會更好，因爲它會處理您的尺寸。 – Jeremy

@Jeremy謝謝，但我只是希望一切都留在原地，如果文本添加在那裏，無論長度。 –

然後內聯塊路由可能是你想去的地方（我看到@ musheng-wu已經用這種方法添加了答案。 – Jeremy

我想你只需要設置的「名」的寬度。

試試這個。

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

來源

2017-08-01 17:46:20

以下更改HTML和CSS等，並開始利用Flexbox的:)

.col-md-6{ 
 
\t font-family: Norwester; 
 
\t color: #891b15; 
 
} 
 
.borderBox{ 
 
\t border: 2px solid #ccc; 
 
    height: 500px; 
 
    border-radius: 15px; 
 
} 
 
.test{ 
 
\t height: 162px; 
 
\t overflow: hidden; 
 
} 
 
#scroll-scroll{ 
 
\t 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{ 
 
\t margin: 0px 11px; 
 
    color: #891b15; 
 
    flex: 1; 
 
} 
 
.separate-line{ 
 
\t border-bottom: 2px solid #ccc; 
 
    margin: 0 13px 0px 13px; 
 
} 
 
.icon-margin2{ 
 
\t margin: 0 18px; 
 
} 
 
.floating{ 
 
\t float: right; 
 
\t margin-right: 20px; 
 
}

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

來源

2017-08-01 18:20:36 rach8garg

停止移動其他div的文本

回答

相關問題