Question

http://codepen.io/anon/pen/OMLLwB

    #news {
    width: 85%;
    margin: 0 auto;
}

#news ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#worldMap img {
    width: 100%;
}

.newspiece {
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #90C3D4;
    height: 130px;
}

.newspiece h3 {
    border-bottom: 3px solid black;
    margin-bottom: 10px;
}

@media(min-width: 600px) {
    .newspiece {
    width: 25%;
    margin-left: 5%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    }

  .newspiece:first-child {
    margin-left:0;
  }
}

我在这里遗漏了什么吗？总容器的宽度（#news）为85％，每个项目的宽度为25％，其中两个左边距为5％，总和为85％，那么我为什么要调整它，最右边的列去下来？

Answer 1

我已经改变了你的html / css。这是一个更清洁的解决方案，并在所有浏览器中被支持

html：

 <div class="flex">
  <div class="box">
    <h3>Title</h3>
    <p>Content</p>
  </div>
   <div class="box">
     <h3>Title</h3>
    <img src="http://www.placecage.com/400/300" alt="">
  </div>
   <div class="box">
     <h3>Title</h3>
     <p>Content</p>
   </div>
</div>

<强>的CSS：

.flex {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.box {
  width: 300px;
  margin: 10px;
  padding: 20px;
  background: #90C3D4;
}

.box h3 {
  padding-bottom: 5px;
  border-bottom: 3px solid black;
}

.box img {
  max-width: 100%;
}

Answer 2

<property name="openjpa.jdbc.EagerFetchMode" value="parallel"/> <property name="openjpa.jdbc.SubclassFetchMode" value="join"/>

如果未使用* { box-sizing: border-box; }，则填充会增加元素的总宽度。

为什么我的专栏会下降？

2 个答案: