我正在尝试使newUserAccounts
窗格占据其容器的整个高度$taskAction->passwords
,我可以通过给.info
来完成此工作,但是我不能将.card
设为绝对,因为我将要列出这些卡,并且与.card { position: absolute; }
一起将它们堆叠在一起。这是代码:
.card
position:absolute;
我不能给
<div class="project-list">
<div class="card">
<div class="info">
<div class="info-section">
<h3 class="title">Project Title</h3>
<p class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate ut perspiciatis est sit architecto molestiae illo debitis accusantium laboriosam labore!
</p>
</div>
<div class="info-section">
<span>Technologies used: <ul>
<li>ReactJs</li>
<li>Express</li>
<li>Redux</li>
<li>MongoDB</li>
</ul></span>
</div>
<div class="info-section">
<div class="github-url">Github Url: <a href="www.github.com">www.github.com</a></div>
<div class="demo">Click to Open Demo</i>
</div>
</div>
</div>
<div class="img-container">
<img src="https://images.unsplash.com/photo-1570419844482-a232abf0b402?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
</div>
</div>
</div>
一个静态的* {
box-sizing: border-box;
}
.card {
width: 100%;
height: auto;
background-color: #ccc;
margin: auto;
position: absolute;
z-index: 0;
}
.card .info {
position: absolute;
width: 200px;
background-color: #ff729f;
z-index: -1;
color: #000;
padding: 10px;
overflow-y: scroll;
top: 0;
bottom: 0;
}
.info::-webkit-scrollbar {
width: 4px;
}
.info::-webkit-scrollbar-thumb {
background: #888;
}
.info::-webkit-scrollbar-thumb:hover {
background: #555;
}
.card:hover .info,
.card:active .info {
z-index: 2;
box-shadow: 10px 0 10px -1px rgba(40, 40, 40, 0.75);
}
.card:hover .img-container {
opacity: 0.6;
}
.card:hover .img-container img {
box-shadow: unset;
}
.card .info .info-section {
border-bottom: 0.8px solid rgba(100, 100, 100, 0.8);
margin-bottom: 10px;
}
.card .info .info-section:last-child {
border-bottom: none;
}
.card .info .info-section .demo {
margin: 10px 0;
padding: 10px 5px;
background-color: red;
color: white;
border-radius: 4px;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
cursor: pointer;
}
.card .img-container {
width: calc(100% - 100px);
height: 100%;
transition: 100ms ease-in;
background-color: #blue;
float: right;
}
.card .img-container img {
width: 100%;
height: auto;
float: right;
box-shadow: -10px 0 8px -1px rgba(40, 40, 40, 0.75);
}
,因为它必须完全响应。
答案 0 :(得分:1)
解决此问题的一种方法是将$ cat ./main.c
#include <stdio.h>
#include <stdbool.h>
int main( int argc, char* argv )
{
int i;
int* p = &i;
int* n = NULL;
printf( "%zu\n", sizeof( (bool)p ) );
printf( "%p - %d\n", p, (bool)p );
printf( "%p - %d\n", n, (bool)n );
printf( "%d\n", (bool)3 );
return 0;
}
中的$ gcc --version
gcc (GCC) 8.2.1 20181215 (Red Hat 8.2.1-6)
Copyright (C) 2018 Free Software Foundation, Inc.
This is free software; see the source for copying conditions. There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
更改为$ gcc -g ./main.c && ./a.out
1
0x7ffdac3290bc - 1
(nil) - 0
1
。这样做的缺点是需要声明position
。我看到您说的不是静态高度,但是一定比例也会起作用,并有助于使页面保持一定的响应速度。
.card