1
私は画像とタイトルを表示するヘッダとリンクを含むコンテナを持っています。私は、カード 'Mochi'と 'Codex'を自然に重ね合わせたいと思っています（文字通り互いの上にはありません）。したがって、同じ列に2つの小さいカードがあり、それは異なる列にある大きなカードのサイズに等しいでしょう。どうやってカードを積み重ねることができますか？
どうやってカードを自然に流れるようにすることができますか？私はポジションを取ろうとした：絶対、しかしそれはちょうど私のカードを台無しにする。また、私は各リンクの上に乗ったときに下線を引いていましたが、これらのカードを作成した後、私はもうリンク上にマウスを置いても下線はありません。 それは意味をなさないことを望みます。ここに私のJFiddleだ：https://jsfiddle.net/j5L6m2ju/3/
おかげ
ここではHTMLです：
<div class="card">
<div class="header1" class="grayscale">
<h1>Quad</h1>
</div>
<div class="container1">
<ul>
<li><a href="">vxcgxcgxfgfgdfgdfg</a></li>
<li><a href="">sdfsdfsdfsdfsdf</a></li>
<li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
<li><a href="">vfdfgdfgdfgdfgd</a></li>
<li><a href="">dfgdfgdfgdfgdfg</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="header2" class="grayscale">
<h1>Mochi</h1>
</div>
<div class="container2">
<ul>
<li><a href="">fsdfsdfsdfsdfsdfsd</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="header3" class="grayscale">
<h1>Codex</h1>
</div>
<div class="container3">
<ul>
<li><a href="" target="blank">sdgfsdfsdfsdfsdfsdfsd</a></li>
<li><a href="" target="blank">vfdgdfgdfgdfgdfgdfgdfg</a></li>
</ul>
</div>
</div>
<div class="card">
<div class="header4" class="grayscale">
<h1>New York Family</h1>
</div>
<div class="container4">
<ul>
<li><a href="">sdfsdfsdfsdfsdfsdf</a></li>
<li><a href="">fgdfgdfgdfgdfgdf</a></li>
<li><a href="">sfgsdfsdfsdfsdfsd</a></li>
</ul>
</div>
</div>
ここでCSSです：
div.card {
width: 240px;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border: 1px solid #f2f2f2;
text-align: center;
margin:10px;
border-radius: 15px;
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
display:inline-block;
}
div.card:hover {
filter: none;
-webkit-filter: grayscale(0);
}
div.header1 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/Quad.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
div.header2 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/Mochi.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position: relative;
}
div.header3 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/codex_card.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position:relative;
}
div.header4 {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
background: url(../images/NYF.jpg) no-repeat;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
position:relative;
}
div.container1 {
font-size:12px;
padding: 5px;
}
div.container2 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container3 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container4 {
font-size:12px;
padding: 5px;
position:relative;
}
div.container1 .container2 .container3 .container4 li {
margin:5px;
margin-bottom: 10px;
}
div.container1 .container2 .container3 .container4 a {
text-decoration:none;
padding-bottom: 4px;
}
div.container1 .container2 .container3 .container4 li:hover {
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
transition:.4s;
}
httpsを与えられたスペースの下の列の内容を2つに分割されなければならない天候を設定するために使用され 、列ブレークにdiv要素を分割する方法を提供します/jsfiddle.net/j5L6m2ju/5/ –