javascript 我怎样才能把一个垂直的差距2 CSS网格

jfgube3f 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(124)

//grid 1 details
const JSONOfReactUrls =
  '{"https://create-react-app.dev/docs/getting-started":"React Start",\
    "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
    "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
    "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes"\
    }';

let obj = JSON.parse(JSONOfReactUrls);

for (let key in obj) {
  elem = document.createElement('div');
  elem.setAttribute('id', obj[key]);
  elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
  document.querySelector('.my_grid_react').append(elem);
}

//grid 2 details
const JSONOfPythonUrls =
  '{"https://docs.python.org/3/library/stdtypes.html#dict":"Python dictionary",\
"https://docs.python.org/3/library/stdtypes.html#typesseq-common":"Python Sequence",\
"https://docs.python.org/3/reference/expressions.html#comparisons":"Python expressions",\
"https://pythontutor.com/visualize.html#mode=edit":"Python visualiser",\
"https://towardsdatascience.com/unpacking-operators-in-python-306ae44cd480":"Unpacking operator"\
    }';

obj = JSON.parse(JSONOfPythonUrls);

for (let key in obj) {
  elem = document.createElement('div');
  elem.setAttribute('id', obj[key]);
  elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
  document.querySelector('.my_grid_python').append(elem);
}

.my_grid_react {
  display: grid;
  float: left;
  grid-template-columns: repeat(1, auto);
  background-color: lightgreen;
  width: 50%;
}

.my_grid_react div {
  background-color: yellow;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

.my_grid_python {
  display: grid;
  grid-template-columns: repeat(1, auto);
  background-color: orange;
  width: 50%;
}

.my_grid_python div {
  background-color: aqua;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

<div class="my_grid_react"></div>
<div class="my_grid_python"></div>

我创建了2个grids，并使用float将2个网格相邻放置;现在我希望在网格（其背景颜色为lightgreen）和网格（其背景颜色为orange）之间有一个小的垂直白色间隙，比如5 px，请建议如何在相邻网格之间放置垂直间隙。

JavaScript

来源：https://stackoverflow.com/questions/76149666/how-can-i-put-a-vertical-gap-between-2-css-grids

2条答案

按热度按时间

fwzugrvs1#

使用CSS flex（如果需要，也可以使用grid，actually a mix of the two）

使用gap创建父Flex .row
将.col flex与gap配合使用
不要在JavaScript中重复，创建一个类似createMenu()的函数，它接受选择器目标和JSON
不要命名Array，这显然不是数组。（这是一个JSON字符串）
不要命名不是网格的东西grid

// DOM helper functions
const el = (sel, par) => (document || par).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Create vertical menu 
const createMenu = (targetSelector, json) => {

  const elTarget = el(targetSelector);
  const obj = JSON.parse(json);
  
  for (let key in obj) {
  
    const elem = elNew("div", {
      // id: obj[key], // No, please just don't
      innerHTML: `<a href=${key}>${obj[key]}</a>`
    });
    
    elTarget.append(elem);
    
  }
};

// Init:

const reactURLs = '{\
  "https://create-react-app.dev/docs/getting-started":"React Start",\
  "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
  "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
  "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes"\
}';
const pythonURLs = '{\
  "https://docs.python.org/3/library/stdtypes.html#dict":"Python dictionary",\
  "https://docs.python.org/3/library/stdtypes.html#typesseq-common":"Python Sequence",\
  "https://docs.python.org/3/reference/expressions.html#comparisons":"Python expressions",\
  "https://pythontutor.com/visualize.html#mode=edit":"Python visualiser",\
  "https://towardsdatascience.com/unpacking-operators-in-python-306ae44cd480":"Unpacking operator"\
}';

createMenu(".menu_react", reactURLs);
createMenu(".menu_python", pythonURLs);

.row {
  display: flex;
  flex-direction: row; /* Unneeded, row is by default */
  gap: 0.5rem;
}

.col {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

/* Customization: */

.my_grid {
  padding: 0.5rem;
}

.my_grid > div {
  padding: 0.5rem;
  font-size: 0.9rem;
}

.menu_react       { background-color: lightgreen; }
.menu_react > div { background-color: yellow; }
.menu_python       { background-color: orange; }
.menu_python > div { background-color: aqua; }

<div class="row">
  <div class="col my_grid menu_react"></div>
  <div class="col my_grid menu_python"></div>
</div>

赞(0）回复(0）举报 2023-05-05

t0ybt7op2#

由于它们彼此相邻浮动，因此我将使用bootstrap 3方法，即：为每列添加侧填充，与行的最左侧和最右侧边距取反。
1.只是别忘了之后clear浮点数。
1.当然，您可以将其与媒体查询相结合，例如在小屏幕上，使列的宽度为100%而不是50%。

// DOM helper functions
const el = (sel, par) => (document || par).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Create vertical menu 
const createMenu = (targetSelector, json) => {

  const elTarget = el(targetSelector);
  const obj = JSON.parse(json);

  for (let key in obj) {

    const elem = elNew("div", {
      // id: obj[key], // No, please just don't
      innerHTML: `<a href=${key}>${obj[key]}</a>`
    });

    elTarget.append(elem);

  }
};

// Init:

const reactURLs = '{\
  "https://create-react-app.dev/docs/getting-started":"React Start",\
  "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
  "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
  "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes"\
}';
const pythonURLs = '{\
  "https://docs.python.org/3/library/stdtypes.html#dict":"Python dictionary",\
  "https://docs.python.org/3/library/stdtypes.html#typesseq-common":"Python Sequence",\
  "https://docs.python.org/3/reference/expressions.html#comparisons":"Python expressions",\
  "https://pythontutor.com/visualize.html#mode=edit":"Python visualiser",\
  "https://towardsdatascience.com/unpacking-operators-in-python-306ae44cd480":"Unpacking operator"\
}';

createMenu(".menu_react", reactURLs);
createMenu(".menu_python", pythonURLs);

body {
  border: 1px solid black;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.half-col {
  float: left;
  width: 50%;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

/* add this for responsiveness */

/*
@media (max-width: 768px) {
  .half-col {
    width: 100%;
  }
}
*/

.col {
  display: flex;
  flex-direction: column;
  /* removed this: */
  /* width: 100%; */
  gap: 0.5rem;
}

/* Customization: */

.my_grid {
  padding: 0.5rem;
}

.my_grid>div {
  padding: 0.5rem;
  font-size: 0.9rem;
}

.menu_react {
  background-color: lightgreen;
}

.menu_react>div {
  background-color: yellow;
}

.menu_python {
  background-color: orange;
}

.menu_python>div {
  background-color: aqua;
}

<body>

  <div class="row">
    <div class="half-col">
      <div class="col my_grid menu_react">
      </div>
    </div>
    <div class="half-col">
      <div class="col my_grid menu_python"></div>
    </div>
  </div>

  <!-- clears the floats -->
  <div style="clear:both"></div>

</body>

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 我怎样才能把一个垂直的差距2 CSS网格

2条答案

相关问题

热门标签

最新问答