CSS网格:同时包装三个div

文章/答案/技术大牛

发布

2回答

html、css、grid-layout、css-grid

使用CSS网格，当屏幕变小时，我如何设置三个div的样式以同时换行？这意味着从这个开始：| div | | div | | div |要这样做：| div || || div

浏览 32提问于2018-03-03得票数 0

回答已采纳

2回答

我正在尝试构建一个响应性的CSS网格，在必要时包含三个列。我希望最小列宽度为200 30，否则使用30%的百分比。我相信我可以使用minmax CSS计算来做到这一点，但是当我使用百分比而不是像素时会出现一些奇怪的溢出错误。我希望当视口达到640 to (对于三列) 200 *3，加上2*20 to间隙时，红色方框将被包装。但是，请注意，当视口变小时，红色框根本不会包装，而是溢出到窗口的一个隐藏部分。由于某些原因，第三个框只在视口为399或更少时才会包装</

浏览 0提问于2020-05-12得票数 0

回答已采纳

1回答

三个div* /两列布局-可能与Flexbox？*

css、layout、flexbox

在移动平台上，侧边栏用于在主内容下面包装。 

浏览 4提问于2021-11-06得票数 2

回答已采纳

2回答

嵌套在列表视图中的水平控件组

jquery、jquery-mobile、radio-button

我正在尝试在嵌套在listview中的水平controlgroup中实现jQuery单选按钮。所需的单选按钮包含在<p class="ui-li-aside">标记中，该标记应显示在列表的右侧，但当前显示在文本下方。

浏览 0提问于2013-07-08得票数 0

回答已采纳

2回答

CSS网格，中间有一个额外的包装器

css、twitter-bootstrap-3、css-grid

我想使用CSS网格的网格模板区域。我正在尝试覆盖css网格的自动放置机制。因此，任何位于中间的div，如果没有指定特定的网格区域，都会出现在网格的末尾，而不会影响网格本身。我在这里创建了一个问题的例子-- 您可以看到，由于额外的包装器，'side

浏览 0提问于2017-10-21得票数 8

1回答

可见绑定和动态css绑定

javascript、css、knockout.js

我正在寻找另一种方法来实现这样的目标:在第二个项目上使用CSS类动态填充网格。在某种程度上，我可能在寻找一种不同的方法。带有描述的JSFiddle三个people通过foreach。向网格中添加三个div。动态地，Knockout将last的css类分配给从foreach出来的每秒钟的div。同时，每个people的可见性属性决定是否在网格中显示他。CSS将

浏览 1提问于2014-07-15得票数 0

回答已采纳

1回答

img项的CSS网格运行良好，但当imgs获得div包装时会中断。

html、css、css-grid

这是我第一次修改CSS网格。我用它制作了一个响应性的图像网格，它在一个玩具示例中非常好地工作。然而，当我试图在我的实际项目中使用代码时，一切都以非常奇怪的方式中断。打破它的第一步是向图像中添加div包装器。(我使用包装器为图像和其他样式提供占位符)。<div class="grid"> <img class="item" src="https://via.placeholder.

浏览 0提问于2019-03-09得票数 4

回答已采纳

2回答

使用CSS网格使多个不同宽度的列换行？

html、css、css-grid

我正在为我的新响应式布局测试CSS网格，但我在包装方面遇到了问题。grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) <div&

浏览 6提问于2017-08-21得票数 13

回答已采纳

2回答

如何在HTML div中匹配图像列表以形成2D网格？

javascript、html、css、knockout.js

我正在使用Knockout填充一个带有方形图像列表的div。div目前具有固定的宽度和高度，但最终将是可调整大小的。我希望这些图像能逐行填充div。因此，当图像n到达div宽度的边界时，图像n+1被包装到下一行。当前，图像流过div的边界来填充整个窗口。当前标记如下： <

浏览 3提问于2015-01-22得票数 0

回答已采纳

2回答

让CSS网格行填充可用空间。

html、css

我正在使用CSS-grid，我希望CSS-格栅的最后一行能够使用包装器中的所有剩余空间，但同时希望所有其他行都遵循该。包装器的CSS： width: 100%; display: grid; 编辑：示例代码： (我希望按钮出现在<em

浏览 3提问于2020-12-16得票数 2

回答已采纳

2回答

CSS网格-从1行，3行过渡到3行，1行

css、css-grid、grid-layout

我正在探索CSS，看看它是否能够完全取代对我的特定用例的响应性CSS媒体查询的需求。, 1fr)); margin: 0 auto;} 当我将视口宽度缩小到三列在250 of以下时，我希望网格布局能够快速调整为三行一列的布局：当您缩小视口宽度时，由于所选的自动放置算法，当前有一个临时布局，其中第三个项被

浏览 3提问于2019-09-23得票数 3

回答已采纳

5回答

如何才能显示:flex容器与其包装的内容水平展开？

html、css、flexbox

在使用css flexbox时，三个主要浏览器在某些方面的行为似乎完全不同。在这种情况下，我试图创建一个图像网格： <div class="photo"></div> <d

浏览 5提问于2014-05-01得票数 32

回答已采纳

5回答

集装箱内嵌块的中心网格

css

我在集装箱里有一套内嵌块div。我希望这个div能形成一个适当的“类似于表”的网格，元素对齐到左边，所以如果最后一行网格包含的元素比其他网格少，那么网格就不会被打破。此外，网格本身需要相对于容器居中。显而易见的方法是将网格放入包装器中，为包装设置text-align: left，并在父容器中设置中心包装器本身。但是，在这种情况下，包装器的宽度不符合单个行中元

浏览 2提问于2013-05-26得票数 2

回答已采纳

1回答

使CSS网格从末尾包装

css、css-grid

如何使css网格从末尾(从ltr流的右侧)开始包装到下一行？grid-auto-rows: minmax(48px, 1fr);} 关键词: css网格，自动流，自动列，反包装<

浏览 4提问于2021-01-15得票数 1

1回答

当使用网格时，如何让背景图像扩展到全宽？

css、grid、sass、background-image

有没有可能让包装器元素的背景图像扩展到网格之外，同时保持响应？ <bg-wrap> <&#x

浏览 2提问于2013-10-28得票数 1

1回答

全宽div中的Susy居中内容

susy-compass

我想让div中的内容居中，同时允许div采用整个屏幕的宽度。我在标题中有一个背景图像，它重复x，并且必须在内容居中的同时拉伸整个屏幕。我知道我可以在下面的例子中添加一个div作为容器，但这会给html添加很多非语义标记。susy容器include被添加到我的项目的包装器中。<body> <header> <div class

浏览 1提问于2013-02-06得票数 3

1回答

如何抵消一个网格项目，也移动它的兄弟姐妹？

html、css、css-grid

我正在使用CSS网格。我想要抵消一个元素，以便它水平地跨网格列移动。我还希望此元素保留其当前宽度，并在元素宽度之外应用偏移量值。solid 1px; padding: 20px;} margin-left: 100px;<divclass="container"> <div class="item offset">1/

浏览 1提问于2020-01-27得票数 3

2回答

动态css网格布局，将一些元素保持在同一行上

css、reactjs、css-grid

我最近开始使用css网格()，但我觉得自己并没有充分利用它们。我的问题涉及显示数据是动态的情况。例如，我想显示以下内容：简言之：); 在不动态生成网格css的情况下能够做到这一点吗？

浏览 5提问于2020-10-23得票数 0

回答已采纳

2回答

从web服务器运行应用程序时，DIV布局与从本地开发服务器运行应用程序不同

css、html

我有一个CSS问题。我的DIVs的布局不同，这取决于我从web服务器运行web应用程序的时间与从本地VS2010开发服务器运行web应用程序的时间。当我在本地运行时，我的三个内部div (preButtons，navContainer，postButtons)都是内联显示的，但是当我从IIS7.5Web服务器发布和运行时，每个div后面都会有一个换行符下面是HTML： div#pag

浏览 0提问于2011-06-10得票数 5

回答已采纳

4回答

如果你的内容跨越整个宽度，你需要使用Bootstrap的“容器”和“行”吗？

twitter-bootstrap、twitter-bootstrap-3、bootstrap-4、twitter-bootstrap-4

我认为Bootstrap 3和4的标准是 <div class="row"> <div class="col-md-8"> ... </div> <!--

浏览 2提问于2017-04-03得票数 17

点击加载更多