用於設計文本和數量的CSS同一行

-1

我有一個要求，設計如下所示。我在MVC 5中使用引導。這是一個響應式用戶界面。我需要在引導模式彈出窗口中顯示如下所示。用於設計文本和數量的CSS同一行

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Cras id mi neque。 Donec pulvinar quam diam，at accumsan odio pretium ac ........................................ .................................................. ......... $ xx，xxx.xx

餘額.............................. .................................................. .................................................. ... $ xx，xxx.xx

最後付款mm-dd-yyyy .............................. .................................................. ........................ $ x，xxx.xx

來源

2017-05-17 user2995902

你有沒有考慮使用一個表？ –

是的。目前我正在使用表格來執行此操作。但不知道如何做第一行，我需要的內容和數量相同的行。 – user2995902

這是你在找什麼？ https://jsfiddle.net/jmjdsuLx/1/ –

要允許文本掛你需要使用的div和浮動值權值之上。請記住，取決於描述的長度，可能成本仍然會下降。

<div style="width: 600px"> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id mi neque. Donec pulvinar quam diam, at accumsan odio pretium ac<span style="float: right;">$xx,xxx.xx</span> 
 
    </div> 
 
    <div style="background-color: whitesmoke;"> 
 
    Balance<span style="float: right;">$xx,xxx.xx</span> 
 
    </div> 
 
    <div> 
 
    Last Payment mm-dd-yyyy<span style="float: right;">$x,xxx.xx</span> 
 
    </div> 
 
</div>

來源

2017-05-17 22:04:18

太棒了。這工作完美。謝謝！！ – user2995902

我唯一的擔心是我不能在內容和成本之間添加虛線。沒關係。對目前的變化感到滿意。 – user2995902

我試圖解決您的問題。希望它可能對你有所幫助

<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id mi neque. Donec pulvinar quam diam, at accumsan odio pretium </h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
<table class="table table-hover"> 
 

 
<tbody> 
 
    <tr> 
 
    <td>ac........</td> 
 
    <td>$xx,xxx.xx</td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td>Balance....</td> 
 
    <td>$xx,xxx.xx</td> 
 
    
 
    </tr> 
 
    <tr> 
 
    <td>July</td> 
 
    <td>$xx,xxx.xx</td> 
 
    
 
    </tr> 
 
</tbody> 
 
    </table>   </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    </div>

來源

2017-05-17 20:14:28 komal

謝謝。但我需要同一行中的內容和數量。 – user2995902

這應該處理對準的文字量。

tr td:last-child { 
 
    text-align: right; 
 
} 
 

 
table { 
 
    background-color: white; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: whitesmoke; 
 
} 
 

 
td { 
 
    vertical-align: bottom; 
 
}

<table> 
 
<tbody> 
 
    <tr> 
 
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id mi neque. Donec pulvinar quam diam, at accumsan odio pretium ac</td> 
 
    <td>$xx,xxx.xx</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Balance</td> 
 
    <td>$xx,xxx.xx</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Last Payment mm-dd-yyyy</td> 
 
    <td>$x,xxx.xx</td> 
 
    </tr> 
 
</tbody> 
 
</table>

來源

2017-05-17 20:25:01

感謝您的回覆。是否有可能具有全寬的內容，以便它顯示在文本數量之上。如果描述很長，那麼就不會有任何空間。 – user2995902

不在表中，但它是可能的。 –

我已經添加了另一個解決div問題的答案。 –

用於設計文本和數量的CSS同一行

回答

相關問題