Css 使用div替换表布局中的整列

我需要使用div创建这样的显示

我必须使用div而不是table，因为：

每个单元格的内容可能不同，但同级之间的高度必须相同

单击红色部分时，它将替换整个列

有可能吗

更新

这是我到目前为止的代码：（很混乱：（）

/$数据的结构如下：
//$data[0]=['id'=>101，'img'=>'img1.jpg'，'username'=>'user1'，'location'=>'mycity1']；
//$data[1]=['id'=>102，'img'=>'img2.jpg'，'username'=>'user2'，'location'=>'mycity2']；
//$data[2]=['id'=>103，'img'=>'img3.jpg'，'username'=>'user3'，'location'=>'mycity3']；
如果（计数（$data）>1）
{
//将$data重新构造为$mydata
//$mydata的结构如下所示：
//$mydata['img']=[0=>'img1.jpg'，1=>'img2.jpg'，2=>'img3.jpg']；
//$mydata['username']=[0=>'user1'，1=>'user2'，2=>'user3']；
//$mydata['location']=[0=>'mycity1'，1=>'mycity2'，2=>'mycity3']；
//$mydata['id']=[0=>101,1=>102,2=>103]；
$mydata=[]；
foreach（$key=>$val的数据）
{
$mydata['img_src'][$key]=$val['img_src']；
$mydata['username'][$key]=$val['username']；
$mydata['location'][$key]=$val['location']）；
$mydata['id'][$key]=$val['id']；
}
$nda=计数（$data）；
$ncol=4；
$nrow=ceil（$ndata/$ncol）；
$htmlview=''；
//循环尽可能多的行。例如，8个数据将创建2行
对于（$i=0；$i$value）
{
$htmlrow.=''；//每个字段显示在不同的行中
$nfield1=$i*$ncol；//循环索引（开始）
$nfield2=$nfield1+$ncol；//循环索引（结束）
对于（$j=$nfield1；$j<$nfield2；$j++）//0-3；4-7
{
$start=$j==$nfield1；
$end=$j==$nfield2-1；
$htmlcontent=''；
交换机（$索引）
{
案例“img_src”：
$htmlcontent=''；
打破
案例“用户名”：
$htmlcontent=''
;
打破
案例“地点”：
$htmlcontent='.$value[$j].'；
打破
案件编号：
$htmlcontent='follow'；
打破
}
$htmlrow.=''
.$htmlcontent
.'';
}
$htmlrow.=''；
}
//结束foreach（$mydata作为$index=>$value）
$htmlrow.=''；
如果（$i<$nrow）
{
//要在表之间分隔的空行
$htmlrow.='
'；
}
$htmlview.=''；
$htmlview.=$htmlrow；
$htmlview.=''；
}
//结束（$i=0；$i 1）
{
$row=$data[0]；
$htmlview=''；
$htmlview.=''
.''
“.$row['location']”
“跟随”
;
}
//如果（计数（$data）>1，则结束

因此，首先，程序调用一个ajax请求，该请求将显示表部分。单击其中一个按钮时，程序将生成另一个ajax进程，该进程返回不带表的部分（“else”部分）。因此，相应列中的内容需要替换为新数据

对不起，我不太擅长解释这个

---

另外，我没有包括代码中使用的样式，因为它们只用于填充和字体大小。。我的代码已经很混乱了，因为似乎没有人愿意回答这个问题。。我想发布我为解决这个问题所做的变通方法

逻辑非常简单：

首先，当我生成表时，我为同一列上的每个项都指定了一个唯一的标识符

然后，我使用javascript通过几个

for

循环手动更改每个具有该标识符的项

---

我想把代码放在这里，但它比问题中的代码更混乱。

请分享您的代码，以便我们提供帮助you@dapidmini这是可能的，在表中，您想要实现！到目前为止，我添加的代码可能重复。。请帮忙。。我现在只使用了tabledisplay

// $data is structured like this:
// $data[0] = ['id' => 101, 'img' => 'img1.jpg', 'username' => 'user1', 'location' => 'mycity1'];
// $data[1] = ['id' => 102, 'img' => 'img2.jpg', 'username' => 'user2', 'location' => 'mycity2'];
// $data[2] = ['id' => 103, 'img' => 'img3.jpg', 'username' => 'user3', 'location' => 'mycity3'];
if (count($data) > 1)
{
    // re-structure $data into $mydata
    // $mydata is structured like this:
    // $mydata['img'] = [ 0 => 'img1.jpg', 1 => 'img2.jpg', 2 => 'img3.jpg' ];
    // $mydata['username'] = [ 0 => 'user1', 1 => 'user2', 2 => 'user3' ];
    // $mydata['location'] = [ 0 => 'mycity1', 1 => 'mycity2', 2 => 'mycity3' ];
    // $mydata['id'] = [ 0 => 101, 1 => 102, 2 => 103 ];
    $mydata = [];
    foreach ($data as $key => $val)
    {
        $mydata['img_src'][$key] = $val['img_src'];
        $mydata['username'][$key] = $val['username'];
        $mydata['location'][$key] = $val['location']);
        $mydata['id'][$key] = $val['id'];
    }

    $ndata = count($data);
    $ncol = 4;
    $nrow = ceil($ndata / $ncol);

    $htmlview = '';
    // loop as many rows there would be. e.g. 8 data will create 2 rows
    for ($i=0; $i<$nrow; $i++)
    {
        // each row will contain a table
        $htmlrow = '<table width="100%">';

        // loop each data fields
        foreach ($mydata as $index => $value)
        {
            $htmlrow .= '<tr>'; // each field is displayed in different rows
            $nfield1 = $i * $ncol; // loop index (start)
            $nfield2 = $nfield1 + $ncol; // loop index (end)
            for ($j = $nfield1; $j < $nfield2; $j++) // 0-3; 4-7
            {
                $start = $j == $nfield1;
                $end = $j == $nfield2-1;

                $htmlcontent = '';
                switch ($index)
                {
                    case 'img_src':
                        $htmlcontent = '<img class="suggestuser-img" src="'.$value[$j].'">';
                        break;
                    case 'username':
                        $htmlcontent = '<a href="/user/'.$value[$j].'" class="suggestuser-username default-link wordbreak-all">'
                                            .$value[$j]
                                        .'</a>'
                                        ;
                        break;
                    case 'location':
                        $htmlcontent = '<span class="suggestuser-text wordbreak-all rv-b f3i">'.$value[$j].'</span>';
                        break;
                    case 'id':
                        $htmlcontent = '<button type="button" data-userid="'.$value[$j].'">follow</button>';
                        break;
                }

                $htmlrow .= '<td width="25%" class="suggestuser-col">'
                                .$htmlcontent
                            .'</td>';
            }
            $htmlrow .= '</tr>';
        }
        // end foreach ($mydata as $index => $value)
        $htmlrow .= '</table>';

        if ($i < $nrow)
        {
            // empty line to separate between tables
            $htmlrow .= '<br>';
        }

        $htmlview .= '<div>';
        $htmlview .= $htmlrow;
        $htmlview .= '</div>';
    }
    // end for ($i=0; $i<$nrow; $i++)
}
else // if (count($data) > 1)
{
    $row = $data[0];

    $htmlview = '';
    $htmlview .= '<img class="suggestuser-img" src="'.$row['img_src'].'">'
                .'<a href="/user/'.$row['username'].'" class="suggestuser-username default-link wordbreak-all">'
                    .$row['username']
                .'</a>'
                .'<span class="suggestuser-location wordbreak-all rv-b f3i">'.$row['location'].'</span>'
                .'<button type="button" data-userid="'.$row['id'].'">follow</button>'
                ;
}
// end if (count($data) > 1)