88698
Question:
I'm trying to position 4 little pictures in every corner of the screen. I want something like:
<img alt="" class="b-lazy" data-src="https://i.stack.imgur.com/ei4rX.png" data-original="https://i.stack.imgur.com/ei4rX.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />
How can I achieve this using HTML and CSS?
The following code displays a picture where there should be 4 little ones.
<pre class="snippet-code-css lang-css prettyprint-override">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;
}
<pre class="snippet-code-html lang-html prettyprint-override"><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>
Answer1: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.
<pre class="snippet-code-css lang-css prettyprint-override">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;
}
<pre class="snippet-code-html lang-html prettyprint-override"><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>
Answer2:Here you go: <strong><a href="https://jsfiddle.net/hu7f9d1L/" rel="nofollow">jsfiddle.net/hu7f9d1L</a></strong>.
Screenshoot:
<a href="https://i.stack.imgur.com/ksD0j.png" rel="nofollow"><img alt="Demo" class="b-lazy" data-src="https://i.stack.imgur.com/ksD0j.png" data-original="https://i.stack.imgur.com/ksD0j.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>
The idea behind it is we're using an element which will contain all the children/corner, and by using position: absolute, they'll stay on the corner. <strong>Use <a href="http://www.w3schools.com/cssref/pr_class_position.asp" rel="nofollow">position: fixed</a> if needed</strong>; probably this way you needn't use the ul element and change li to div.
Try to resize the window/iframe, and you'll see the div elements stay on their corresponding corner.
![Exception Using PayPal-PHP-SDK [Http response code 400]](/skin/wt/img/t.gif)