html - 如何修复每个列表项之间的这些差距？

Question

我正在为自己创建一个投资组合，但我正在努力处理这些列表项。我希望它们具有相同的高度并相互对齐。在每个列表项中都有一个额外的行，我相信这是造成它的原因。我该如何解决这个问题？

这是它的样子: Picture of the problem

#content-wrapper {
  background-color: #EBEBEB;
  margin: 0 auto;
  width: 100%;
  border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
  list-style-type: none;
  margin: 0 auto;
  width: 100%;
  padding: 0;
  text-align: center;
}
#content-wrapper ul li {
  background-color: whitesmoke;
  color: #1B1B1B;
  text-align: center;
  display: inline-block;
  margin: 5px 2.5px;
  width: 45%;
}
#content-wrapper ul li p {
  padding: 10px;
  height: 150px;
}
#content-wrapper ul li img {
  width: 100%;
}

<div id="content-wrapper">
  <ul>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
    </li>
    <li>
      <img src="http://ashleye.co.uk/img/portfolio-1.png">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
        at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
    </li>
  </ul>
</div>

Answer 1

您的代码还有另一个版本。一切都在这里。

任何其他问题，只要问:)

  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

body{
  margin:0;
  padding:0;
}
#wrapper{
  width:100%;
  height:2000px;
  background:#eee;
}
#portfolio{
  width:900px;
  height:1200px;
  margin:auto;
}
.project{
  width:47.5%;
  height:400px;
  background:#fff;
  float:left;
  margin:10px 2.5% 0 0;
}
.project img{
  width:80%;
  height:auto;
  margin-left:10%;
}
.project p{
  text-align:center;
}

http://codepen.io/raze444/pen/mOBjOx?editors=1100