html - 仅针对左右 div，而非中间

Question

尝试搜索此问题但未找到解决方案。

我会有一个响应式包装器，其中包含多个(未设置编号)div。太像画廊了!

我只想定位左右 div 并删除那些(左 margin 用于左 div，右 margin 用于right div) margin 以便 div 靠在屏幕的两侧。

fiddle

---

.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;
}

更新 fiddle :https://jsfiddle.net/sswrL7pq/1/

对于具有任意数量内容 div 的真正响应式布局而言，边距可能不是一种方式，因为您不知道哪些将位于布局的边缘。有一些不同的方法来处理它。

flex 盒子布局:您可以像这样设置您的容器样式:

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

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

Fiddle using flex layout

对于较旧的浏览器，您可以利用 inline-block 和 justify 来获得类似的效果。它不是很干净，但效果很好。关键样式如下:

.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