Question

我有一个网页，其中有一些框显示数据库中的数据..问题是我无法在同一级别对齐文本

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>

Answer 1

你需要JavaScript才能做到这一点。使盒子具有相同高度的唯一方法是将它们显示为table-cell，并且将按钮和文本放在中间的唯一方法是使用position: absolute，但这在内部不起作用表格单元格由于某种原因。

唯一可以让你将CSS显示为3X3单元格的纯CSS更改，其中第一行包含标题，第二行包含文本，第三行包含按钮。但是我担心你不会在那个设置中得到那样的边框，当然它会以负面的方式影响你的文档结构，因为你需要先输出三个标题，所以语义上你的文档变得一团糟

将文本与不同行数css对齐

1 个答案: