具有不同數量的行對準文本CSS

我有一個網頁具有一些箱子示出從數據庫數據..問題是我不能在同一水平具有不同數量的行對準文本CSS

enter image description here

是對齊文本有什麼辦法可以使在服務文本&分佈與其他

這是我的HTML對齊

@foreach ($sections as $section) 
<div class="sec"> 
<h3 class="section" > {{$section->name}} </h3> 
<p class="desc"> {{$section->description}}</p> 
<a href="#" class="more"></a> 
</div> 
@endforeach

這是我的CSS

.home_main .sec{ 
     float: left; 
     margin-left: 1.5%; 
     border:solid 2px ; 
     border-color: #cfcfcf; 
     width:17%; 
     height: 29%; 
    } 

    .home_main .section{ 
     text-align: center; 
     font: arial; 
     font-size: 16px; 
     color: #494949; 
     margin-top: 10%; 
     margin-right: 3px; 
     margin-left: 3px; 

    } 

    .home_main .desc{ 
     color: #9e9e9e; 
     font-size: 12px; 
     text-align: center; 
     margin-right: 2px; 
     margin-left: 2px; 
     margin-top: 12%; 
     margin-bottom: 10px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     display: -webkit-box; 
     -webkit-box-orient: vertical; 
     -webkit-line-clamp: 4; 
} 

    .home_main a{ 
     width: 130px; 
     height: 31px; 
     position: absolute; 
     margin-top: 2%; 
     margin-left: 2%; 
     background:transparent url(../img/more.png) no-repeat; 

    }

渲染HTML

<div class="sec"> 
<h3 class="section" > MNUFUCTIRONG </h3>  
<p class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet dictum leo ut placerat. Aenean dignissim sapien congue, sodales lacus at, accumsan lorem. Duis </p> 
<a href="#" class="more"></a> 
</div> 
    <div class="sec"> 
<h3 class="section" > Real Estate </h3>  
<p class="desc"> Industrial and Commercial zone 30 KM from Cairo (Obur City) - The zone serves production facilities for SMEs and bigger scale clients for warehousing , logistics services , and Retail spaces.</p> 
<a href="#" class="more"></a> 
</div> 
    <div class="sec"> 
<h3 class="section" > START UPS </h3> 
<p class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet dictum leo ut placerat. Aenean dignissim sapien congue, sodales lacus at, accumsan lorem. Duis </p> 
<a href="#" class="more"></a> 
</div> 
    <div class="sec"> 
<h3 class="section" > Seravices & Distribution </h3> 
<p class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet dictum leo ut placerat. Aenean dignissim sapien congue, sodales lacus at, accumsan lorem. Duis </p> 
<a href="#" class="more"></a> 
</div> 
    <div class="sec"> 
<h3 class="section" > FMCG </h3>  
<p class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet dictum leo ut placerat. Aenean dignissim sapien congue, sodales lacus at, accumsan lorem. Duis </p> 
<a href="#" class="more"></a> 
</div>

來源

2015-01-01 Fawzinov

發佈您的實際HTML，而不是任何模板。 – j08691

@ j08691 它只是從數據庫獲取數據的代碼 – Fawzinov

好吧，發佈呈現的HTML以便我們可以重現問題。 – j08691

你需要JavaScript來做到這一點。將這些框放在同一高度的唯一方法是將它們顯示爲table-cell，將按鈕和文本置於中間位置的唯一方法是使用position: absolute，但由於某些原因，這在表格單元格內不起作用。

唯一純粹的CSS更改可能會將其顯示爲3X3單元格的表格，其中第一行包含標題，第二行包含文本，第三行包含按鈕。但是恐怕你不會在那個設置中得到這樣的邊框，當然它會以負面的方式影響你的文檔結構，因爲你需要首先輸出三個標題，所以語義上你的文檔變得混亂。

來源

2015-01-01 03:49:29 GolezTrol

具有不同數量的行對準文本CSS

回答

相關問題