HTML列未正確對齊？

Question

如果print-bannertext-left沒有內容，則print-bannertext-center向左移動。 我怎樣才能解決這個問題？

 .print-bannertext-left { width: 30%; float: left; } .print-bannertext-center { width: 30%; float: left; margin-bottom: 0.2%; } .print-bannertext-right { width: 30%; float: right; margin-bottom: 0.8%; } 

 <div class="print-header"> <div class="print-bannertext-left"> </div> <div class="print-bannertext-center"> 8000-00-PO-201-01 </div> <div class="print-bannertext-right"> 7/15/2015 4:41:11 PM </div> </div> <div class="print-header"> <div class="print-bannertext-left"> </div> <div class="print-bannertext-center"> 8000-00-PO-201-01 </div> <div class="print-bannertext-right"> 7/15/2015 4:41:11 PM </div> </div> <div class="print-header"> <div class="print-bannertext-left"> </div> <div class="print-bannertext-center"> 8000-00-PO-201-01 </div> <div class="print-bannertext-right"> 7/15/2015 4:41:11 PM </div> </div> 

Answer 1

1. 您應該使用表格，這樣效率更高

2. 如果您不想使用表格，則在其中沒有內容的情況下，將print / bannertext-left設置為width / height，它仍將保留一些大小，因此不會有任何重疊。

    <div class="col-1"> <div class="inner-col-1"> <p>column 1</p> </div> </div> <div class="col-2"> <div class="inner-col-2"> <p>column 2</p> </div> </div> <div class="col-3"> <div class="inner-col-3"> <p>column 3</p> </div> </div> .col-1, .col-2, .col-3 { width: 30%; display: inline-block } .inner-col-1, .inner-col-2, .inner-col-3 { width: 100% } 

這是小提琴 。

Answer 2

給您的列設置最小高度：

 .print-bannertext-left { width: 30%; float: left; min-height: 1px; } .print-bannertext-center { width: 30%; float: left; margin-bottom: 0.2%; min-height: 1px; } .print-bannertext-right { width: 30%; float: right; margin-bottom: 0.8%; min-height: 1px; } 

 <div class="print-header"> <div class="print-bannertext-left"> </div> <div class="print-bannertext-center"> 8000-00-PO-201-01 </div> <div class="print-bannertext-right"> 7/15/2015 4:41:11 PM </div> </div> <div class="print-header"> <div class="print-bannertext-left"> </div> <div class="print-bannertext-center"> 8000-00-PO-201-01 </div> <div class="print-bannertext-right"> 7/15/2015 4:41:11 PM </div> </div> <div class="print-header"> <div class="print-bannertext-left"> </div> <div class="print-bannertext-center"> 8000-00-PO-201-01 </div> <div class="print-bannertext-right"> 7/15/2015 4:41:11 PM </div> </div>