Question

那是我的笔：http://codepen.io/helloworld/pen/BcjCJ?editors=110

我无法在整个数据网格周围创建左边距和右边距。只有左边是可能的。

我该如何解决？

我想要每边10px。

HTML：

async function processArray(arr) {
    for (let item of arr) {
        let result = await somePromiseReturningFunc(item);
        // do something with result here before
        // going on to next array item
    }
    return someFinalResult;
}

processArray(someArray).then(result => {
    // done processing array here
}).catch(err => {
    // handle error here
});

CSS：

 <div id="gridWrapper" class="test">
<div id="gridHeader">     
      <div class="columnHeader">Monday</div>
      <div class="columnHeader">Tuesday</div>        
  </div>

  <div id="gridContent">

    <!-- Monday Column-->
    <div style="background:lightblue;" class="column">
      <!-- ko: foreach-->    
      <div class="custom-row">3333333 111111111111222222222222222222222222222 2222222222222222222222222222   2222222222222222222222222222222222222222222222 2222222222222222222222222222   2222222222222222222222222222222222222222222222 2222222222222222222222222222   2222222222222222222222222222222222222222222222 2222222222222222222222222222   2222222222222222222222222222222222222222222222 2222222222222222222222222222   2222222222222222222111  1111 111111111111111 111111111111111 1111111111111</div>

      <div class="custom-row">2222222222222222222222222222222 2222222222222222222222222222   22222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222</div>
    </div>

    <!-- Tuesday Column-->
    <div style="background:green;" class="column">
        <!-- ko: foreach-->
      <div class="custom-row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsd  dffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd  dffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div>
      <div class="custom-row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div>
    </div>

  </div>

</div>

Answer 1

请勿使用固定位置来定位元素。 http://codepen.io/anon/pen/KpNNzK

#gridWrapper {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

body,
html {
  padding: 0;
  margin: 0;
}

.test {
  position: relative;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  /* Firefox */

  -webkit-animation: fadein 2s;
  /* Safari and Chrome */

  -o-animation: fadein 2s;
  /* Opera */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {
  /* Firefox */

  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  /* Safari and Chrome */

  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  /* Opera */

  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.columnHeader {
  background: yellow;
}

.columnHeader,
.column {
  -webkit-box-flex: 1;
  /* This causes that all headers have the same width independently from their content */

  width: 100%;
  font-weight: bold;
  font-size: 1.2em;
}

#gridHeader {
  display: flex;
  /* current version */
  /* This causes that all columns have the same width independently from their content */

  width: 100%;
  align-items: center;
  text-align: center;
  position: relative;
  top: 0px;
  left: 0px;
  height: 50px;
  background: gray;
}

#gridContent {
  display: -webkit-box;
  /* This causes that all columns have the same width independently from their content */

  width: 100%;
  background: red;
  position: relative;
  top: 0px;
  bottom: 0px;
  overflow-y: auto;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.custom-row {
  height: 200px;
  /* fix this with flex that the equal height is taken*/

  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid blue;
  background: orange;
}

<div id="gridWrapper" class="test">
  <div id="gridHeader" style="">
    <div class="columnHeader">Monday</div>
    <div class="columnHeader">Tuesday</div>
  </div>

  <div id="gridContent">

    <!-- Monday Column-->
    <div style="background:lightblue;" class="column">
      <!-- ko: foreach-->
      <div class="custom-row">3333333 111111111111222222222222222222222222222 2222222222222222222222222222 2222222222222222222222222222222222222222222222 2222222222222222222222222222 2222222222222222222222222222222222222222222222 2222222222222222222222222222 2222222222222222222222222222222222222222222222
        2222222222222222222222222222 2222222222222222222222222222222222222222222222 2222222222222222222222222222 2222222222222222222111 1111 111111111111111 111111111111111 1111111111111</div>

      <div class="custom-row">2222222222222222222222222222222 2222222222222222222222222222 22222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222</div>
    </div>

    <!-- Tuesday Column-->
    <div style="background:green;" class="column">
      <!-- ko: foreach-->
      <div class="custom-row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsd dffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd dffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div>
      <div class="custom-row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd
        fsdsfdfsdfsadfsadfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div>
    </div>

  </div>

</div>

Answer 2

解决方案是将此css放在#gridContent

上

width:calc(100% - 60px); // 2 * 30px ...
margin-left:30px;

无法创建左右边距

2 个答案: