1
私はCSSで以下のレイアウトを達成しようとしていました。ここで、レイアウトスナップである：このような石材なし異なる画像サイズのCSSを使用した画像ギャラリーブロック？
https://archive.org/details/Untitled1_20161122
らしい石積みでは不可能である（行/列の幅/高さは、石工に当てはまらない両方の変更は、私も間違っているかもしれません）。素敵な純粋なCSSソリューションはありますか？大変感謝しています。私はかなり長い間CSSソリューションを探してきました。例えば、www.bata.comは、目的を説明するのに役立ち、石工がなければ、私の心配する限り、ホームページに似た結果をもたらします。
.gallery {
\t \t \t \t width: 70%;
\t \t \t \t margin: 0 auto;
\t \t \t \t background: crimson;
\t \t \t \t position: relative;
\t \t \t }
\t \t \t .col-20 {
\t \t \t \t width: 20%;
\t \t \t \t float: left;
\t \t \t \t /*border: 1px solid red;*/
\t \t \t }
\t \t \t .col-40 {
\t \t \t \t width: 40%;
\t \t \t \t float: left;
\t \t \t \t /*border: 1px solid red;*/
\t \t \t }
\t \t \t .col-60 {
\t \t \t \t width: 60%;
\t \t \t \t float: left;
\t \t \t \t /*border: 1px solid red;*/
\t \t \t }
\t \t \t div {
\t \t \t \t overflow: hidden;
\t \t \t }
\t \t \t img {
\t \t \t \t width: 100%;
\t \t \t \t height: auto;
\t \t \t }<div class="gallery">
\t <div class="col-40">
\t \t <img src="1.png" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="2.jpg" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="3.jpg" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="4.png" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="2.jpg" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="3.jpg" alt="">
\t </div>
</div>は、事前にありがとう：
は、ここに私のコードです。
ウェブサイトへのリンクを投稿してください。 –
また、私はコードスニペットで質問を編集したので、画像をどこかにアップロードしてここにリンクすると素晴らしいと思います... https://archive.org/ –
こんにちは、私は提案された編集を行いました。ありがとう。ソリューションbtwに関するご提案はありますか？ –