Question

尝试搜索此内容但尚未找到解决方案。

我会有一个包含多个（没有设定数字）div的响应包装器。就像一个画廊！

我只想定位左右div并删除它们（左侧margin左侧div，右侧margin表示右侧div margin s这样div s就会对着屏幕的两侧。

.work {
  position: relative;
  float: left;
  width: 20%;
  height: 20%;
  margin: 5%;
  background-color: red;
}
.wrapper_work {
  width: 80vw;
  height: 100vh;
  background-color: black;
}

<div class='wrapper_work'>
  <div class='work'>
    <p>
      this is my portfolio gallery
    </p>
  </div>
  <div class='work'>
    <p>
      this is my portfolio gallery
    </p>
  </div>
  <div class='work'>
    <p>
      this is my portfolio gallery
    </p>
  </div>
  <div class='work'>
    <p>
      this is my portfolio gallery
    </p>
  </div>
</div>

Answer 1

您可以像这样使用伪元素first-child和last-child：

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

.work:last-child {
  margin-right: 0;
}

更新了小提琴：https://jsfiddle.net/sswrL7pq/1/

边距可能不适合使用任意数量的内容div进行真正响应式布局，因为您不知道哪些内容将位于布局的边缘。有一些不同的方法来接近它。

Flex框布局：您可以将容器设置为与此类似的样式：

display: flex;
justify-content: space-between;
flex-flow: row wrap;

内容将按行排列，内容之间放置任何额外空间，使其与边缘齐平。 Flex框适用于较新的浏览器，IE11 +。

Fiddle using flex layout

对于旧版浏览器，您可以利用内联块并证明可以获得类似的效果。它不是很干净但效果很好。关键的风格是：

.wrapper {
  font-size: 0.1rem;
  text-align: justify;
}

.wrapper:after {
  content: "";
  width: 100%;
  display: inline-block;
}

.item {
  display: inline-block;
  font-size: 1rem;
}

Fiddle using justify layout

Answer 2

您可以使用 CSS 3 flexbox ：

更新：包含的图片

body,
p {
  margin: 0
}
div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: black
}
p {
  min-width:20%; 
  margin:10px 0;
   border: red solid;
}
img {
  max-width: 100%;
  display:block;
  margin:auto
  
}

<div class='work'>
  <p>
    <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
     <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
    <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
    <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
     <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
     <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
     <img src="http://dummyimage.com/150x150/fff/000">
  </p>
  <p>
     <img src="http://dummyimage.com/150x150/fff/000">
  </p>
 
</div>

Answer 3

.work:first-child,.work:last-child {
   margin: 5% 0;
}

仅针对左右div，而不是中间

3 个答案: