代码之家 › 专栏 › 技术社区 › Raphael Rafatpanah

如何将右边距/填充应用于此水平滚动元素?[复制品]

flexbox css html

Raphael Rafatpanah · 技术社区 · 6 年前

这个问题已经有了答案:

Last margin / padding collapsing in flexbox / grid layout 4答

我有一个水平滚动的DIV,它有一个100px的左右填充。左边的填充物似乎工作正常。但是,右侧不可见。此外,最后一部分的50px右边距也不见了。

我错过了什么?为什么不尊重右边距和右边距?

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

更新

根据@chaitanya swami的建议,以下是一个解决方案。我仍在想,为什么上面的方法不能如预期的那样有效。

body {
  margin: 0;
}

#wrapper {
  width: 100vw;
  overflow: auto;
}


#carousel {
  display: flex;
  padding: 0 100px;
  width: calc(100vw + 400px);
}

.slide {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div id="wrapper">
  <div id="carousel">
    <section class="slide"></section>
    <section class="slide"></section>
    <section class="slide"></section>
  </div>
</div>

3 回复 | 直到 6 年前

Andy Hoffman 6 年前

如果不添加几个额外的子项,您的选择将受到限制。

首先是一个解决方案,不包括任何额外的 HTML 孩子们。

去除 flex 从父母那里。
移去外部 padding 来自父级的规则。
添加 white-space: nowrap 给父母。
制作子节 inline-block .
为了处理不需要的间隙空间( 内联块 ),设置 font-size 父对象的 0 ,在子元素中将其还原为基本字体大小
添加左右边距 100px 分别给第一个/最后一个孩子。

我采取的一个步骤是分配 100px 到本机CSS变量的外部间距,因为该值用于多个位置。我认为这有助于保持代码的可读性。

:root {
  --outer-spacing: 100px;
}

body {
  margin: 0;
}

div {
  width: 100vw;
  overflow: auto;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0;           /* Prevent unwanted inline-block gap spacing */
}

section {
  font-size: 16px;        /* Restore base font size */
  width: 300px;
  margin: 0 15px;
  height: 300px;
  max-height: 100vh;
  background: red;
  display: inline-block;
}

section:first-of-type {
  margin-left: var(--outer-spacing);
}

section:last-of-type {
  margin-right: var(--outer-spacing);
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

http://jsfiddle.net/oxdbpq62/3/

最后,是一个更简单的解决方案,但添加了 span 在最初的孩子之前和之后。注意:我删除了显式的宽度,并将它们添加到 flex-basis 狭槽。

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  box-sizing: border-box;
}

.gutter {
  flex: 0 0 100px;
}

section {
  flex: 0 0 300px;
  max-height: 100vh;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <span class="gutter"></span>
  <section></section>
  <section></section>
  <section></section>
  <span class="gutter"></span>
</div>

http://jsfiddle.net/jw0qz2t3/

chaitanya swami 6 年前

您将需要一个父级的DIV。您需要定义父DIV的宽度,它当前是100VW。你可以通过设置900px的宽度或者总宽度来达到你想要的效果。希望有帮助。

Er Deepak Prabhakar 6 年前

您也可以使用类似这样的CSS

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

<style>
 body {
  margin: 0;
}

div {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}
</style>