画面の四隅に4枚の写真があります。html css

Question

画面の四隅に4枚の小さな画像を配置しようとしています。

どのようにHTMLとCSSを使ってこれを実現することができます私のような何かをしたいですか？

次のコードは、4つの小さなものがあるはずの画像を表示します。

div.img { 
 
    border: 1px solid #ccc; 
 
} 
 
div.img:hover { 
 
    border: 1px solid #777; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.responsive { 
 
    padding: 0 6px; 
 
    float: left; 
 
    width: 24.99999%; 
 
} 
 
@media only screen and (max-width: 5000px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    margin: 6px 0; 
 
    } 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="responsive"> 
 
    <div class="img"> 
 
    <img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img"> 
 
    <a target="_blank" href="animals/dog.jpg"> 
 
     <img src="animals/dog.jpg" alt="Forest" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img"> 
 
    <a target="_blank" href="animals/monkey.jpg"> 
 
     <img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img"> 
 
    <a target="_blank" href="animals/fox.jpg"> 
 
     <img src="animals/fox.jpg" alt="Mountains" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="clearfix"></div>

Answer 1

あなたの基本的なレイアウトを構築するために4つの要素に分割するflex、margin（オート）、orderと擬似要素を使用することができます。

以下の例では、4つの四角を四隅に配置していますが、いずれにしてもコンテンツはいっぱいになります。ここで

body { 
 
    display:flex; 
 
    flex-flow:row wrap; 
 
    margin:0; 
 
    height:100vh; 
 
    } 
 
/* body:after 
 
    actually your code gives a container for this */ 
 
    .clearfix { 
 
    /*content:''; 
 
    display:block;*/ 
 
    width:100%; 
 
    order:1; 
 
    } 
 
.responsive { 
 
    border:solid; 
 
    margin:0; 
 
    } 
 
.responsive:nth-child(1) { 
 
    margin-bottom:auto; 
 
    margin-right:auto; 
 
    order:0; 
 
    } 
 
.responsive:nth-child(2) { 
 
    margin-bottom:auto; 
 
    margin-left:auto; 
 
    order:0; 
 
    } 
 

 
.responsive:nth-child(3) { 
 
    margin-top:auto; 
 
    margin-right:auto; 
 
    order:2; 
 
    } 
 
.responsive:nth-child(4) { 
 
    margin-top:auto; 
 
    margin-left:auto; 
 
    order:2; 
 
    }

<div class="responsive"> 
 
    <div class="img"> 
 
    <img src="animals/cat.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img"> 
 
    <a target="_blank" href="animals/dog.jpg"> 
 
     <img src="animals/dog.jpg" alt="Forest" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img"> 
 
    <a target="_blank" href="animals/monkey.jpg"> 
 
     <img src="animals/monkey.jpg" alt="Northern Lights" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img"> 
 
    <a target="_blank" href="animals/fox.jpg"> 
 
     <img src="animals/fox.jpg" alt="Mountains" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="clearfix"></div>

Answer 2

あなたが行く：jsfiddle.net/hu7f9d1L。

Screenshoot：

その背後にある考え方は、我々はすべての子供/コーナーが含まれています、とposition: absoluteを使用することによって、彼らはコーナーにとどまるだろう要素を使用しています。 position: fixed（必要な場合）;おそらくこの方法でul要素を使用せずにliをdivに変更する必要はありません。

ウィンドウ/ iframeのサイズを変更しようとすると、div要素が対応する隅に表示されます。