•  21-06-2023
  •  | 
  •  

Domanda

I am converting my site into a fluid layout and am completely stuck on a couple of things. I want the images to sit next to each other and when the browser window is shrunk I want the images to shrink with the browser window (%). This is working fine with the way I have set the page up BUT! The last image drops below the first image when the page browser window is shrunk? I want it to stay put and just shrink inline with the other images along the row. I think this is a float thing but I have tried to change the float around but cannot get the desired effect?

The other issue I am having is that on hover I want to put a 1px border on the image. I have achieved this no problem. If you check the css you will see that i have put a 1px white border on the div and then a colored one on hover. This is to prevent the images along the row from moving on hover! Not sure if there is a better way to do this or not? Anyway the problem is that on hover the border appears (actually changes from white to red) but there is an area of dead space on the bottom between the image and the containing div? It's like 2px padding but I cannot seem to get rid of it? Here is the fiddle 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Align</title>

    <style type="text/css">
      .personnal-work{position: relative; margin:0px auto; width: 100%; max-width: 843px; height: 400px; margin-top: 20px; border: 1px solid red;}
      .image-land-div{width: 25%; max-width: 194px; margin-left: 1%; float: left; display: inline; border: 1px solid white;}
      .image-land{width: 100%; display: inline; height: 100%;}
      .image-land-div:hover{border: 1px solid #bc2021;}
    </style>
</head>

<div class="personnal-work">
    <div class="image-land-div"><a href="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg"><img src="photography/personnal/cairo-giza-tn.jpg" alt="" class="image-land" /></a></div>
    <div class="image-land-div"><a href="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg"><img src="photography/personnal/cairo-giza-pyramids-tn.jpg" alt="" class="image-land" /></a></div>
    <div class="image-land-div"><a href="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg"><img src="photography/personnal/cambodia-phnom-penh-tn.jpg" alt="" class="image-land" /></a></div>
    <div class="image-land-div"><a href="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg"><img src="photography/personnal/white-desert-tn.jpg" alt="" class="image-land" /></a></div>
    <div style="clear: both"></div>
</div>

</body>
</html>
È stato utile?

Soluzione

Your .image-land-div has a width of 25%, which is 25% width of the .personnal-work plus a margin-left:1%. So when you calculate the space take by .image-land-div is 26% of .personnal-work ie, 25% width + 1% margin-left + 1px border on each side. So when you add up the 4 .image-land-div the total width exceeds 100%. To prevent the last image from dropping down change the styles as below

.image-land-div{
    width: 24%; 
    max-width: 194px; 
    margin-left: 1%; 
    float: left; 
    display: inline; 
    border: 1px solid white;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox */   
    box-sizing: border-box;         /* Opera/IE 8+ */
}

To solve the second issue, ie the space between the image and border on hover, add a vertical-align style to the image. Use the below styles for it.

.image-land{
    width: 100%; 
    display: inline; 
    height: 100%;
    vertical-align:middle;
}

Check this DEMO

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top