Question

我正在尝试为项目创建漫画书页面。我设法创建了一个可打开的封面，现在我试图在首页上添加单独的图块，就像漫画书一样。

但是，当我尝试添加这些块时，似乎“盖上”了我的封面。例如：https://codepen.io/reallynotprogramming/pen/GadVZJ

我尝试将单个div嵌套在主div容器中，但似乎不起作用。

body {
     background-image: url('images/Avenger\ vs\ Justice\ League2-01.jpg');
     background-size: contain;
     background-position: center;  
    
}

 .flex-container {
    /* display: flex;
    flex-direction: row; */
    background-color: white;
    height: 820px;
    width: 700px;
    margin-top:40px; 
    margin-bottom: 40px;
    margin-left: 500px; 
    box-shadow: 20px 20px;
  }
  
  .cover{
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Symbol_from_Marvel%27s_The_Avengers_logo.svg/877px-Symbol_from_Marvel%27s_The_Avengers_logo.svg.png);
    width: 700px;
    height: 820px;
    transform: rotateY(0deg);
    background-color: blue;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: all .5s ease-in;
}

.flex-container:hover .cover{
    transform: rotateY(-180deg);
  }

.page1{
    width: 700px;
    height: 820px;
    margin-top: 75px;
    margin-left: 100px;
    background-color: green;
}

 .flex-container {
    /* display: flex;
    flex-direction: row; */
    background-color: white;
    height: 820px;
    width: 700px;
    margin-top:40px; 
    margin-bottom: 40px;
    margin-left: 500px; 
    box-shadow: 20px 20px;
  }
  
  .cover{
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Symbol_from_Marvel%27s_The_Avengers_logo.svg/877px-Symbol_from_Marvel%27s_The_Avengers_logo.svg.png);
    width: 700px;
    height: 820px;
    transform: rotateY(0deg);
    background-color: blue;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: all .5s ease-in;
}

.flex-container:hover .cover{
    transform: rotateY(-180deg);
  }

.page1{
    width: 700px;
    height: 820px;
    margin-top: 75px;
    margin-left: 100px;
    background-color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Avengers vs JL</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS Link -->
    <link rel="stylesheet" type="text/css" href="project.css">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>    

    <!--Comic Book-->
    <div class="flex-container">
      <div class="cover"></div>
      <div class="page1">Test</div>
    </div>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

您的问题是，默认情况下，块元素不会“堆叠”。对于网络，事物遵循线性流动。如果您想要将东西堆放起来，则必须更改其布局。最简单的方法是使用位置“ absolute”指令。我分叉了您的示例，并在此处添加了一些内容：

https://codepen.io/anon/pen/yWELQM

您会注意到该页面现在在下面。具体来说，这是以下CSS规则允许的：

const string sql = "SELECT TOP 10 * FROM [dbo].[OutboundMessages] ORDER BY [Length] DESC";
using (SqlConnection connection = new SqlConnection(ConnectionString))
{
    connection.Open();
    using (SqlCommand command = new SqlCommand(sql, connection))
    using (SqlDataReader reader = command.ExecuteReader(CommandBehavior.SequentialAccess))
    {
        if (reader.HasRows)
        {
            while (reader.Read())
            {
                string file = Guid.NewGuid().ToString().Replace("-", string.Empty);
                using (StreamWriter writer = new StreamWriter(file))
                {
                    int ordinal = reader.GetOrdinal("FileData");
                    long bytesRead, offset = 0;
                    byte[] buffer = new byte[3072];
                    while ((bytesRead = reader.GetBytes(ordinal, offset, buffer, 0, buffer.Length)) > 0)
                    {
                        offset += bytesRead;
                        writer.Write(Convert.ToBase64String(buffer));
                    }
                }
            }
        }
    }
}

您可以考虑阅读有关HTML元素布局如何工作的信息，以更好地理解它的工作方式。

尝试创建漫画书页面

1 个答案: