css 多个div中的响应式网格，无需样式表

xmjla07d 于 2023-05-02 发布在其他

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

我尝试在计算机上创建一个大致如下的布局：wide layout和这个在移动的：tall layout

我不能使用一个单独的样式表或< style >标签，只有样式属性，因为它是一个网站，不允许这些。

我尝试了几个不同的教程，但不能使它的工作。任何帮助是赞赏，清洁代码提示太因为我是一个初学者。谢谢大家！
我的代码：

<div class="window" style="border: hidden; border-radius: 20px; box-shadow: 0 0 5px red; text-align: center; font-family: monospace; color: black; background-image: linear-gradient(#e6558b,red); padding: 10px; max-width: vw; max-height: 300px; margin: 10px; align-items: center;">
  
  <div class="title" style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; margin: inherit; align-items: inherit; text-align: inherit; max-height: 75px; font-size: 100%;">
    <p style="font-weight: bold;"><img src=""> title <img src=""></p>
    <p>subtitle</p>
  </div>
  
  <div class="miniholder" style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 100px)); grid-gap: 1rem;">
      
    <div class="leftortop" style="border: 1px solid black; height:100px; width: 100%; margin: inherit;">
      <p><img src=""></p>
    </div>
    
    <div class="rightorbottom" style="border: 1px solid black; height:100px; width: 100%; margin: inherit; align-items: inherit;">
      <p style="width: 100%; height: 100%;">lorem ipsum</p>
    </div>
  </div>
</div>

我最初尝试使用Flex Box，但我不知道它们是如何工作的。..我发现this是一种有帮助的，但它并不是我想要的布局，我也不能真正让它工作。

css

来源：https://stackoverflow.com/questions/76025804/responsive-grid-within-multiple-divs-with-no-stylesheet

2条答案

按热度按时间

bakd9h0s1#

一个可能的解决方案是使用flexbox和flex-wrap: wrap。
首先，我们将.window设为一个网格，以便使用gap;注意，grid-gap只是gap的别名：

.window {
  display: grid;
  gap: 1rem;
}

然后，我们将.miniholder设置为flexbox，并允许它进行 Package ：

.miniholder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

现在，对于困难的部分，我们任意选择2 / 5作为.leftortop和.rightorbottom的比率。再乘以另一个任意选择的数字，我们得到150和375。这些将是.leftortop和.rightorbottom的flex-basis-es，或者，基本上是min-width s。flex-grow使它们尽可能地扩展宽度，.leftortop和2 / 5一样快。

.leftortop {
  flex-grow: 2;
  flex-basis: 150px;
}

.rightorbottom {
  flex-grow: 5;
  flex-basis: 375px;
}

从这些，我想你将能够弄清楚其余的。
试试看：

.window, .title, .miniholder, .leftortop, .rightorbottom {
  padding: 1rem;
}

.window {
  display: grid;
  gap: 1rem;
}

.miniholder {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.leftortop {
  flex-grow: 2;
  flex-basis: 150px;
}

.rightorbottom {
  flex-grow: 5;
  flex-basis: 375px;
}

/* Demo only */

.window, .title, .miniholder, .leftortop, .rightorbottom {
  outline: 2px solid black;
}

.leftortop, .rightorbottom {
  outline: 2px solid #aaa;
}

<div class="window">
  <div class="title">Header</div>
  <div class="miniholder">
    <div class="leftortop">Left content here</div>
    <div class="rightorbottom">Right content here</div>
  </div>
</div>

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

0sgqnhkj2#

既然你是初学者;在容器上使用{flex，flex-wrap，gap/justify-content}，{max-width/width with percentage（i.e -如果你需要在父元素中有3个元素，你就在子元素上放30%的元素，并增加一些间隙。
如果你做一个小小的谷歌，你可以弄清楚一切。

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

我来回答

css 多个div中的响应式网格，无需样式表

2条答案

相关问题

热门标签

最新问答