Question

我正在尝试使用CSS网格布局创建部分网站，这也需要在IE10 +中工作。它需要一个左列和两个右列。

布局示例：

CSS：

UIApplication.self

HTML：

<?php 
require '../../include/config.php';
if(strtoupper($_SERVER['REQUEST_METHOD']) == 'POST')
{
    $appuserid = $_REQUEST['tid'];
    $score = 0;
    $time = date('h:i:s');
    $date = date('Y-m-d');
    $correctans = $_REQUEST['correct'];
    $totalqns = $_REQUEST['size'];
    $correct = $_REQUEST['correctquestionid'];
    $incorrect = $_REQUEST['incorrectquestionid'];
    $correct_array = explode(',',$correct);
    $incorrect_array = explode(',',$incorrect);
    $wishlistid = '0';
    $incorrectans = $totalqns-$correctans;
    if($totalqns!='')
    {
    $score = round($correctans/$totalqns*100,2);
    $totalpoints = round($totalqns/$totalqns*100,2); 
    }
    $qryselchk = $m->executeSelectQuery("SELECT * FROM `tbl_user_score` WHERE `userid`='$userid' AND `subjectid`='$subjectid' 
        AND `categoryid`='$sub_categoryid' AND `sub_sub_categoryid`='$sub_sub_categoryid'");
    if(mysqli_num_rows($qryselchk)>=1)
    {
    $qryins = $m->executeQuery("UPDATE `tbl_user_score` SET `time`='$time',`date`='$date',`correctans`='$correctans',`incorrectans`='$incorrectans',`score`='$score' WHERE `userid`='$userid' AND `subjectid`='$subjectid' AND `categoryid`='$sub_categoryid' AND `sub_sub_categoryid`='$sub_sub_categoryid'");

    $qryremove = $m->executeQuery("DELETE FROM `tbl_user_quize_report` WHERE `quizeid`='$sub_sub_categoryid'");
    foreach ($correct_array as $C) {
    $qryins_correct = $m->executeQuery("INSERT INTO `tbl_user_quize_report`(`qnid`,`quizeid`,`userquizid`,`userid`,`answerflag`
    ,`last_date_added`) VALUES ('$C','$sub_sub_categoryid','0','$userid','1',NOW())");
    }
    foreach ($incorrect_array as $I) {
    $qryins_incorrect = $m->executeQuery("INSERT INTO `tbl_user_quize_report`(`qnid`,`quizeid`,`userquizid`,`userid`,`answerflag`
    ,`last_date_added`) VALUES ('$I','$sub_sub_categoryid','$wishlistid','$userid','0',NOW())");
    }

    }
    else
    {
    $qryins = $m->executeQuery("INSERT INTO `tbl_user_score`(`userid`,`subjectid`,`time`,`date`,`correctans`,`incorrectans`,`score`,`categoryid`,`sub_sub_categoryid`) 
        VALUES ('$userid','$subjectid','$time','$date','$correctans','$incorrectans','$score','$sub_categoryid','$sub_sub_categoryid')");   
    foreach ($correct_array as $C) {
    $qryins_correct = $m->executeQuery("INSERT INTO `tbl_user_quize_report`(`qnid`,`quizeid`,`userquizid`,`userid`,`answerflag`
    ,`last_date_added`) VALUES ('$C','$sub_sub_categoryid','$wishlistid','$userid','1',NOW())");
    }
    foreach ($incorrect_array as $I) {
    $qryins_incorrect = $m->executeQuery("INSERT INTO `tbl_user_quize_report`(`qnid`,`quizeid`,`userquizid`,`userid`,`answerflag`
    ,`last_date_added`) VALUES ('$I','$sub_sub_categoryid','$wishlistid','$userid','0',NOW())");
    }

    }
    if($qryins)
    {
        $response["Score"] = array();
        {
            $rows = array();
            $rows["UserId"] = $appuserid;
            $rows["nameid"] = $subjectname;
            $rows["Correct"] = (int)$correctans;
            $rows["totalpoints"] = $totalpoints;
            $rows["score"] = $score;
            $rows["Size"] = (int)$totalqns;
            array_push($response["Score"], $rows);
        }
        echo json_encode($response);
    }
    else
    {
        echo "Error!".mysqli_error($m->con);
    }
}
?>

我想我几乎就在那里但是不能让左栏拉伸两个右栏的高度。

Codepen example

Answer 1

尝试以下代码，看看它是否适用于您的IE（它适用于我的IE 11）。主要更改是使用命名行和列来构建模板：

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 400px;
    grid-gap: 5px;

    -ms-grid-rows: 
      [top-start] 1fr 
      [top-end] 1fr;
    grid-template-rows: 
      [top-start] 1fr 
      [top-end] 1fr;

    -ms-grid-columns: 
      [left-img-start] 3fr 
      [right-img-start] 2fr;
    grid-template-columns: 
      [left-img-start] 3fr 
      [right-img-start] 2fr;
}
#page #left {
    -ms-grid-column: left-img-start;
    grid-column: left-img-start;

    -ms-grid-row: top-start / span 2;
    grid-row: top-start / span 2;

    background-color: #ff0;
}
#page #righttop {
    -ms-grid-column: right-img-start;
    grid-column: right-img-start;
    background-color: #ffff64;
}
#page #rightbottom {        
    background-color: #8cffa0;
}

CSS网格布局（IE支持）

1 个答案: