0
divの要素をさまざまなサイズで並べ替えようとしています。しかし、私は一度だけの問題に走っている番号のdivの要素は、前の '行'の要素間のスペースに収まるように浮動するのではなく、次のdivは、 。以下のコードは、私が意味することをよりよく示しています。私は 'ゲーム' divを、現在位置している場所の上のスペースに合わせて浮かせるようにしたいと思います。以下のdivではなく、divをもう一度divの位置に戻します
h1 {
\t color: white;
}
.center {
\t display: flex;
\t justify-content: center;
\t align-items: center; \t
\t text-align: center;
}
.container {
\t display: inline-block;
}
.default {
\t margin: 1em;
\t float: left;
}
/* For hover text */
.hover_img {
\t width: 100%;
\t height: 100%;
\t position: relative;
\t float: left;
}
.hover_img h4 {
\t color: white;
}
.hover_img:hover img {
\t opacity: .2;
}
.hover_img:hover .center_text {
\t display: block;
}
.center_text {
\t position: absolute;
\t top: 50%;
\t left: 0;
\t display: none;
\t font-weight: bold;
\t text-align: center;
}
img {
\t margin: 0;
}
.rectangle-tile-horizontal {
\t height: 15em;
\t width: 35em;
}
.red {
\t background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
\t width: 30em;
\t height: 30em;
}
#app, #app img {
\t width: 40em;
\t height: 35em;
}\t \t <div class="container">
\t \t \t <div class="rectangle-tile-horizontal red center default">
\t \t \t \t <h1><b>Projects</b></h1>
\t \t \t </div>
\t \t \t
\t \t \t <div class="rectangle-tile-horizontal hover_img default" id="app">
\t \t \t \t <img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
\t \t \t \t <div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Web App</a></h4></div>
\t \t \t </div>
\t \t \t
\t \t \t <div class="hover_img default" id="game">
\t \t \t \t <img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
\t \t \t \t <div class="center_text"><h4><a href="http://stackoverflow.com" target="_blank">Breakout</a></h4> </div>
</div>
あなたは現在、少し鮮明になっている問題を示すためにあなたの例を修正していただけますか？ '.container'の幅が間違っていますか？ –
@OliverBaumann、今まで966px幅で試したことから問題を示していますが、正しく表示されないと思います。スニペットを展開して実行する（またはフルスクリーンで実行する）と、何が起きているのかがわかるはずです。私は、スニペットを実行するだけでは、すべての要素が積み重なっていくのを見るのに十分ではないことがわかりました – nedrathefr