88698

4 pictures in every corner of the screen html css

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.

Recommend

  • How to get the current URL in Robot framework?
  • JavaScript Sort by Date on table not working
  • Creating a simple, full-width, infinite carousel with jQuery
  • Bootstrap - Scrollspy scrolling skipping second to last section
  • Enumerating Controls on a Form
  • Basic many-to-many left join query
  • Why isn't obj.style.left = “200px”; working in this code?
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • Floated image with variable width and heading with background image
  • Assign variable to the value in HTML
  • Remove final comma from string in vb.net
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Blackberry - Custom EditField Cursor
  • How to use carriage return with multiple line?
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Perl system calls when running as another user using sudo
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • Delete MySQLi record without showing the id in the URL
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • Comma separated Values
  • Load html files in TinyMce
  • python regex in pyparsing
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Trying to get generic when generic is not available
  • python draw pie shapes with colour filled
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal