使用div

时间:2017-07-14 11:35:22

标签: css3 tablelayout

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

enter image description here

我必须使用div而不是table,因为:

  1. 每个单元格的内容可能不同,但兄弟姐妹之间的高度必须相同。

  2. 单击红色部分时,将替换整列

  3. 甚至可能吗?

    更新

    到目前为止这是我的代码:(它很乱:()

    // $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)
    

    所以首先,程序调用一个ajax请求,它将显示表部分。当单击其中一个按钮时,程序将进行另一个ajax进程,该进程返回没有表的部分('else'部分)。所以相应列中的东西需要用新数据替换。

    抱歉,我不太擅长解释这个问题。

    P.S。我没有包含此代码中使用的样式,因为它们仅用于填充和字体大小..而且我的代码已经非常混乱..

1 个答案:

答案 0 :(得分:0)

因为似乎没有人和/或愿意回答这个问题。我想发布解决这个问题的解决方法。

逻辑非常简单:

首先,当我生成表格时,我给同一列上的每个项目一个唯一的标识符。

然后,我使用javascript手动使用多个for循环来更改具有该标识符的每个项目。

我想把代码放在这里,但它变得比问题中的代码更麻烦......