Question

我正在尝试在点击时在网格项目下方显示一个全宽度内容框...当网格为4宽时我出现它，但由于绝对定位，它会覆盖它下面的项目。

我所追求的行为是，当出现全宽内容框时，它会将其下方的其他网格项向下移动。我无法覆盖任何其他网格项目。请注意，全宽内容框的高度将根据其中的内容长度而变化。

.track-box, .content {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 5px;
}

.track-content {
  position: absolute;
  left: 0;
  max-width: 100%;
  padding: 20px;
  margin: 10px;
}

https://codepen.io/Finches/pen/XVgxEb

有关如何处理此问题的任何帮助？感谢。

Answer 1

一个解决方案是在单击框时切换track-box-container div上的类。然后，您可以在添加或删除该类时手动设置高度。

查看我的codepen

这是最简单的方法，无需更改大量代码。唯一的问题是高度需要是静态的而不是灵活的。

希望这有帮助。

Answer 2

我制作了一个使用内容框动态高度的解决方案......这样，无论内容框中的内容有多小或多大，网格中的项目都将向下移动适当的数量，内容将适合在内容框中正确。这需要精炼一点，但它似乎运作得相当好。

<?php
//processNotes.php
if ($_SERVER["REQUEST_METHOD"] == "POST") {//Check it is coming from a form

$mysql_host = "localhost";
$mysql_username = "xxx";
$mysql_password = "xxx";
$mysql_database = "xxx";

$conn = new mysqli($mysql_host, $mysql_username, $mysql_password, 
$mysql_database);

if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
} 

$p_name = mysqli_real_escape_string($conn, $_POST['page_name']);
//$n_name = mysqli_real_escape_string($conn, $_POST['notes_text']);
//$p_name = filter_var($_POST["page_name"], FILTER_SANITIZE_STRING);
$n_text = filter_var($_POST["notes_text"], FILTER_SANITIZE_STRING);
$n_time = date("Y-m-d H:i:s");   
if (empty($p_name)){
    die("Please enter textA");
} 
if (empty($n_text)){
    die("Please enter textB");
}   


$statement = "INSERT INTO notes_data (page_name, notes, date_time) VALUES('$p_name', '$n_text', '$n_time')"; //prepare sql insert query


//bind parameters for markers, where (s = string, i = integer, d = double,  
b = blob)
//$statement->bind_param('ss',$n_text,$n_time); //bind values and execute 
insert query


    if($conn->query($statement) === TRUE){
    echo "Record Added Sucessfully. ";
    }
    else
    {
    echo "Error" . $statement . "<br/>" . $conn->error;
    }
    $conn->close();

https://codepen.io/Finches/pen/YYQdxz

单击时如何使全宽div显示在网格项下

2 个答案: