How to position 3 images in two equal height columns?

问题

How can I position 3 images like this with CSS?

I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me.

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);

html {
  height: 100%;
  box-sizing: border-box;
}

body {
    width: 1500px;
    text-align: center;
    font-family: arial;
    margin: 0 auto;
}

header ul {
   display: flex;
   list-style-type: none;
   justify-content: space-around;
   padding-bottom: 10px;
   align-items: center;
   border-bottom: 2px solid black;
   font-family: 'Source Code Pro';
}

footer ul {
  display: inline-block;
  list-style-type: none;
  align-items: center;
  font-family: 'Source Code Pro';

}

.logo {
    font-family: 'Source Code Pro';
    font-size: 40px;
    padding-top: 20px;
    font-weight: lighter;

}

/* Website nav code */
#top-nav ul {
    list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}


/* Shop nav code */
#bottom-nav {
  display: flex;
  list-style-type: none;
  justify-content: space-around;
  margin-top: 50px;
  padding-bottom: 10px;
  align-items: center;
  font-family: 'Crimson Text';
}

#bottom-nav ul {
    list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}

#bottom-nav ul li {
    display: inline-block;
    padding: 15px 20px 0 20px;
}

nav ul {
    list-style-type: none;
}

.info {
    display: none;
    color: #fff;
    left : 0;
    top : 45%;
    right : 0;
    text-align : center;
    position: absolute;
}

/* Images code */

/* Footer code */
#footer {
    background: black;
    text-align: center;
    color: white;
		width:100%;
		float:left;
	}

  .wrap {

  		position:relative;
  		margin:0 auto;
  		width:900px;
      height: 200px;
  	}

  .wrap ul {
    list-style-type: none;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Gullible</title>
    <link rel="stylesheet" href="css/women.css" media="screen" title="no title" charset="utf-8"/>
    <link href="normalize.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&amp;sensor=false"></script>
  </head>
  <body>
    <header>
      <nav id="top-nav">
        <h1 class="logo"><a href="index.html">Gullible</a></h1>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="shop.html">Shop</a></li>
          <li><a href="visit.html">Visit</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <nav id="bottom-nav">
      <ul>
        <li><a href="shop.html">Men</a></li>
        <li><a href="women.html">Women</a></li>
        <li><a href="denim.html">Denim</a></li>
        <li><a href="suits.html">Suits</a></li>
        <li><a href="dresses.html">Dresses</a></li>
        <li><a href="accessories.html">Accessories</a></li>
      </ul>
    </nav>
    <div id="jacket" class="pics"><img src="http://i.imgur.com/YJMNEtS.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    <div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
    <div id="hoodie" class="pic"><img src="http://i.imgur.com/47iFqA1.jpg"/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
  </div>
    <div id="" class="pic"><img src=""/>
      <div class="overlay"></div>
      <div class="info">
        <p class="text"></p>
      </div>
    </div>
    <div id="footer">
      <div class="wrap"><strong>FIND US ON</strong>
         <ul>
           <li><a href="">Twitter</a></li>
           <li><a href="">Facebook</a></li>
           <li><a href="">Pintrest</a></li>
           <li><a href="">Instagram</a></li>
         </ul>
       </div>
       <div class="wrap"><strong>NAVIGATION</strong>
         <ul>
           <li><a href="">Home</a></li>
           <li><a href="">Shop</a></li>
           <li><a href="">Visit</a></li>
           <li><a href="">Newsletter</a></li>
         </ul>
       </div>
     </div>
  </body>
</html>

回答1:

Use CSS flexbox.

Very simple, using a nested flex container.

.outer-flex-container {
	display: flex;
}

.inner-flex-container {
	display: flex;
	flex-direction: column;
	margin-left: 5px;
}

<div class="outer-flex-container">

    <div class="image">
    	<img src="http://dummyimage.com/300x205/cccccc/fff" alt="">
    </div>

    <div class="inner-flex-container">

        <div class="image">
        	<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
        </div>
		
        <div class="image">
        	<img src="http://dummyimage.com/150x100/cccccc/fff" alt="">
        </div>

    </div><!-- END .inner-flex-container -->

</div><!-- END .outer-flex-container -->

Benefits of flexbox:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

回答2:

Check the below code, hope it helps.. Note the style is inline, you can put it wherever you want. The best place is in the external CSS file but again it's your wish:-

<html>
<body>
<div id="" class="pic" style="float:left;background:yellow;">

      <div class="overlay" style="float:left;width:30%;">
      Left Hand Side Pic
      <img src=""/></div>
      <div id="right-side" style="float:left;width:70%;">
      <div id="RightPicAbove" class="info" style="background:red;">
        Left Hand Side Above Pic
      </div>
      <div id="RightPicBelow" class="info" style="background:green;">
        Rigth Hand Side Below Pic 
      </div>
      </div>
</body>
</html>

回答3:

Try this

<div id="jacket" class="pics">
            <div class="imgcont">
                <img src="http://i.imgur.com/47iFqA1.jpg" />
                <div class="overlay"></div>
                <div class="info">
                    <p class="text"></p>
                </div>
            </div>
            <div class="imgcont">
                <div id="jacket1" class="pics"><img src="http://i.imgur.com/xWJN7RP.jpg" />
                    <div class="overlay"></div>
                    <div class="info">
                        <p class="text"></p>
                    </div>
                </div>
                <div id="hoodie" class="pic">
                    <img src="http://i.imgur.com/YJMNEtS.jpg" />
                    <div class="overlay"></div>
                    <div class="info">
                        <p class="text"></p>
                    </div>
                </div>
            </div>
        </div>
        <div id="" class="pic"><img src="" />
            <div class="overlay"></div>
            <div class="info">
                <p class="text"></p>
            </div>
        </div>
        <div id="footer">
            <div class="wrap"><strong>FIND US ON</strong>
                <ul>
                    <li><a href="">Twitter</a></li>
                    <li><a href="">Facebook</a></li>
                    <li><a href="">Pintrest</a></li>
                    <li><a href="">Instagram</a></li>
                </ul>
            </div>
            <div class="wrap"><strong>NAVIGATION</strong>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Shop</a></li>
                    <li><a href="">Visit</a></li>
                    <li><a href="">Newsletter</a></li>
                </ul>
            </div>
        </div>

and css

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300);
    @import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic);
    html {
        height: 100%;
        box-sizing: border-box;
    }

    body {
        width: 1500px;
        text-align: center;
        font-family: arial;
        margin: 0 auto;
    }

    header ul {
        display: flex;
        list-style-type: none;
        justify-content: space-around;
        padding-bottom: 10px;
        align-items: center;
        border-bottom: 2px solid black;
        font-family: 'Source Code Pro';
    }

    footer ul {
        display: inline-block;
        list-style-type: none;
        align-items: center;
        font-family: 'Source Code Pro';
    }

    .logo {
        font-family: 'Source Code Pro';
        font-size: 40px;
        padding-top: 20px;
        font-weight: lighter;
    }
    /* Website nav code */

    #top-nav ul {
        list-style-type: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
    /* Shop nav code */

    #bottom-nav {
        display: flex;
        list-style-type: none;
        justify-content: space-around;
        margin-top: 50px;
        padding-bottom: 10px;
        align-items: center;
        font-family: 'Crimson Text';
    }

    #bottom-nav ul {
        list-style-type: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    #bottom-nav ul li {
        display: inline-block;
        padding: 15px 20px 0 20px;
    }

    nav ul {
        list-style-type: none;
    }

    .info {
        display: none;
        color: #fff;
        left: 0;
        top: 45%;
        right: 0;
        text-align: center;
        position: absolute;
    }
    /* Images code */
    /* Footer code */

    #footer {
        background: black;
        text-align: center;
        color: white;
        width: 100%;
        float: left;
    }

    .wrap {
        position: relative;
        margin: 0 auto;
        width: 900px;
        height: 200px;
    }

    .wrap ul {
        list-style-type: none;
    }

    .imgcont {
        display: inline-block;
    }

回答4:

I think what you want to be using is called floats. If you float your #hoodie picture to the left and then put your #jacket pics inside a containing div (lets call it .jackets for simplicity's sake) then float that to the right, you should get the desired effect. See my jsfiddle.

Btw you're missing an enclosing div tag on your #jacket element.

.jackets {
  float: right;
}

#hoodie {
  float: left;
  width: 50%;
}

#jacket {
  float: right;
}

#jacket1 {
  float: right;
  clear: both;
}

来源：https://stackoverflow.com/questions/35761060/how-to-position-3-images-in-two-equal-height-columns

标签

html

css

layout

flexbox