在屏幕的每个角落有4张图片html css [英] 4 pictures in every corner of the screen html css
本文介绍了在屏幕的每个角落有4张图片html css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在屏幕的每个角落放置4张小图片。我想要这样的东西：
如何使用HTML和CSS实现这一目标？
下面的代码显示了一张图片，其中应该有4个小图片。$ b
div.img {border：1px solid #ccc;} div.img ：hover {border：1px solid＃777;} div.desc {padding：15px; text-align：center;} * {box-sizing：border-box;} .response {padding：0 6px;向左飘浮; width：24.99999％;} @ media only screen and（max-width：5000px）{.responsive {width：49.99999％; margin：6px 0; }}。clearfix：after {content：;显示：表格; clear：both;}
< div class =response > < div class =img> < img src =animals / cat.jpgalt =Trolltunga Norwaywidth =600height =400> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =responsive> < div class =img> < a target =_ blankhref =animals / dog.jpg> < img src =animals / dog.jpgalt =Forestwidth =600height =400> < / A> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =responsive> < div class =img> < a target =_ blankhref =animals / monkey.jpg> < img src =animals / monkey.jpgalt =Northern Lightswidth =600height =400> < / A> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =responsive> < div class =img> < a target =_ blankhref =animals / fox.jpg> < img src =animals / fox.jpgalt =Mountainswidth =600height =400> < / A> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =clearfix>< / div>
解决方案您可以使用
flex ，保证金（auto）， order 以及一个伪元素来分割这四个元素来构建您的基本布局。
<在下面的例子中，将四个框放在四个角落，它们可以填充任何东西和内容样式。
body {display：flex;柔性流动：排绕;余量：0;高度：100vh; } / * body：实际上你的代码给了这个容器* / .clearfix {/ * content：'';显示：块; * /宽度：100％;顺序：1; } .responsive {border：solid;余量：0; } .responsive：nth-child（1）{margin-bottom：auto;保证金右：自动;顺序：0; } .responsive：nth-child（2）{margin-bottom：auto;保证金左：自动;顺序：0; } .responsive：nth-child（3）{margin-top：auto;保证金右：自动;顺序：2; } .responsive：nth-child（4）{margin-top：auto;保证金左：自动;顺序：2; }
< div class =responsive> < div class =img> < img src =animals / cat.jpgalt =Trolltunga Norwaywidth =600height =400> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =responsive> < div class =img> < a target =_ blankhref =animals / dog.jpg> < img src =animals / dog.jpgalt =Forestwidth =600height =400> < / A> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =responsive> < div class =img> < a target =_ blankhref =animals / monkey.jpg> < img src =animals / monkey.jpgalt =Northern Lightswidth =600height =400> < / A> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =responsive> < div class =img> < a target =_ blankhref =animals / fox.jpg> < img src =animals / fox.jpgalt =Mountainswidth =600height =400> < / A> < div class =desc>在此处添加对图片的描述< / div> < / div>< / div>< div class =clearfix>< / div>
I'm trying to position 4 little pictures in every corner of the screen. I want something like:
How can I achieve this using HTML and CSS?
The following code displays a picture where there should be 4 little ones.
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>
解决方案 You may use flex, margin(auto), order and a pseudo element to split the four elements to build your basic layout.
example below that puts four boxes to the four corners, they can be filled with anything and content styled anyways.
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>
这篇关于在屏幕的每个角落有4张图片html css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
