multiple-columns 相关问题

我有这个 HTML 结构 …… ... ... 我有这个 HTML 结构 <div id="header"> … </div> <div id="menu"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> 还有 CSS： #header { height: 100px; } #footer { border: 1px solid #989898; padding-bottom: 0.1em; width: 100%; height: 2.2em; position: fixed; bottom: 0px; left: 0px; } #menu { width: 150px; float: left; ??? } #content { ??? } 页眉和页脚都可以，但问题来自菜单和内容 div： “菜单”div 必须从页眉到页脚填充，无需滚动如有必要，“内容”必须显示滚动。他们需要什么 CSS 代码才能让它成为现实？我的方法是将“菜单”和“内容”包装在它们自己的包装中，如下所示： <div id='contentWrapper'> <div id="menu"> .... </div> <div id="content"> .... </div> </div> 样式如下： #contentWrapper { width: 1000px; overflow: hidden; background-color: yellow; } #menu { width: 150px; float: left; background-color: transparent; } #content { width: 850px; float: left; background-color: white; } 颜色是用来说明的。实际上，菜单的高度仍然与以前相同，并且会围绕您放入其中的任何内容进行拉伸，但它总是会呈现出“内容”的完整高度，因为您可以看穿它，并且它占据了它的背景包装器的颜色 - 围绕菜单和内容延伸。试试这个 #menu { width: 150px; height: 100%; overflow-y: auto; display: block; } HTML <div id="wrapper"> <div id="header"> ... </div> <div id="menu"> ... </div> <div id="content"> ... </div> <div id="footer"> ... </div> </div> CSS #wrapper { position: relative; ... ... } #header { position: absolute; top: 0; left: 0; height: 100px; } #footer { position: absolute; bottom: 0; height: XXXpx; display: block; } #menu { position: absolute; top: 110px; left: 0; bottom: 0; width: 150px; height: 100%; display: block; } #content { position: absolute; top: 110px; left: 160px; width: XXXpx; display: block; }

html css multiple-columns

回答 3 投票 0

BULMA：如何使第一列的宽度相等？只能用桌子吗？

使用 Bulma 构建网页我想以这种方式显示几个事件：使用 Bulma 构建网页我想以这种方式显示多个事件： <div class="card" style="background: lightgreen;"> <div class="card-header p-4"> <div class="is-flex is-flex-direction-row "> <div class="has-text-right pr-4 is-one-quarter" style="white-space: nowrap;"> <strong>[1st column]</strong><br/> 参见 https://codepen.io/baschtl/pen/PobXamm 但我希望每个“行/行”的第一列始终具有相同的宽度。但也许这只能通过使用良好的旧 TABLE 元素 [https://bulma.io/documentation/elements/table/] 而不是列或其他东西来实现？非常感谢！温度您可以使用 is-x 类来固定第一列的宽度，可以是 is-1 到 is-12。 <div class="columns"> <div class="column is-1"></div> <div class="column"></div> </div> 我不熟悉这个框架，但这在 CSS 中非常简单。您可以向每个第一个元素添加一个具有宽度的类，如下所示 .width-fix{ width:10rem; } 您的 html（减去空白：nowrap 并添加宽度固定类）： <div class="card" style="background: lightgreen;"> <div class="card-header p-4"> <div class="is-flex is-flex-direction-row "> <div class="width-fix has-text-right pr-4 is-one-quarter"> <strong>[1st column]</strong><br/> Saturday<br /><strong>27th May 2022</strong> </div> <div class="pr-4" style="min-width: 80px;"> <strong>[2nd column]</strong><br/> <a href="#" target="_blank"> <figure class="image is-128x128"> <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png"> </figure> </a> </div> 还要记住，如果您确实需要一张桌子，那么使用桌子也不错，所以您也可以考虑这一点。聚会有点晚了，但仍然：最近我有类似的需求，并设法使用column is-narrow（而不是column is-3或column is-one-quarter）+为每行中的<div>设置固定宽度的东西来使其工作。幸运的是，我能够计算出适用于我所有行中所有此类单元格的 width 值。如果您的数据更加动态，那么您可能需要在运行时计算它。请注意，is-narrow 设计为与至少一个其他 <div className="column"> without 类名称中的 is-... 结合使用，然后它会自动调整大小以填充剩余宽度。示例： const rows = ... // array of row data const width = 320; // calculated during development or at runtime return rows.map(row => <div key={row.id} className="columns"> <div className="column is-narrow" style={{ width }}> {row.text1} </div> <div className="column is-4"> {row.text2} </div> <div className="column"> {row.text3} </div> </div> );

css flexbox grid multiple-columns bulma

回答 3 投票 0

将数据值透视到行

嗨，我有一个来自以下数据的数据透视表数据 ____________________________ 枢轴 _____________ 我需要编写一个程序或开发一个公式来将数据转换为以下格式公式或

excel pivot-table multiple-columns

回答 1 投票 0

mysql：不同“食品类别”和不同“食品加工类型”下的食品加工订购

我想对下面的输入进行排序以获得输出，以便每天客户都有不同的“食品类别”（优先级第一），然后有不同的“食品加工类型”（差异很大......

mysql sorting multiple-columns

回答 1 投票 0

将多列问题合并到一个带有答案和评论的问题列中

我目前正在尝试创建一个审计应用程序，用于从一系列 Sharepoint 表中编写报告发现，其中包含一系列问题列（选择类型列）和相关的com...

multiple-columns powerapps sharepoint-list

回答 1 投票 0

Powerapps：将多列问题合并到一个带有答案和评论的问题列中

我目前正在尝试创建一个审计应用程序，用于从一系列 Sharepoint 表中编写报告发现，其中包含一系列问题列（选择类型列）和相关的com...

multiple-columns powerapps sharepoint-list

回答 1 投票 0

用 R 排列包含相同名称的多列字符值

我使用 R 并且水平合并多个数据集（按列），其中每个数据集都有一个相同的列。例如，考虑 `df1=data.frame('名称'=c('9504','07123','40355','59003'), ...

r sorting multiple-columns

回答 1 投票 0

如何将 CSS 网格包装在列和一定数量的行中，同时遵循逻辑字母顺序？

所以我有一个像这样的网格设置 a b c d 所以我有一个像这样的网格设置 <div class="grid-container"> <div>a</div> <div>b</div> <div>c</div> <div>d</div> <div>e</div> <div>f</div> ... <div>z</div> </div> 我怎样才能让它出现在两列中，按 4 行高分组。创建这样的安排： a | e b | f c | g d | h ----- i | m j | n ... s | w t | x ----- y | z | 没有将 4 或 8 个 div 分组到单独的网格盒的明显答案。与使用 div 不同的实现也受欢迎除了使用字母顺序排序之外，我目前已经半工作了 .grid-container { display: grid; grid-template-columns: repeat(2, 150px); grid-template-rows: repeat(4, auto); } .grid-container DIV:nth-child(8n) { padding-bottom: 10px; } 但这不遵守字母顺序，给出： a | b c | d e | f g | h ----- i | j 添加 grid-auto-flow: column; 容器会在溢出时添加更多列，而忽略定义的 2 列。没有办法（据我所知）动态地执行此操作。以 8 分组并利用 subgrid 是合乎逻辑的。 .grid-container { display: grid; grid-template-columns: repeat(2, 150px); row-gap: 10px; } .item {} .sub { display: grid; grid-column: span 2; grid-template-rows: repeat(4, auto); grid-template-columns: subgrid; grid-auto-flow: column; } <div class="grid-container"> <div class="sub"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <div class="sub"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <div class="sub"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> </div>

css css-grid multiple-columns

回答 1 投票 0

在 Google 表格中根据多个条件查找表格

我有一个谷歌表格，里面有数千张桌子。这是链接文本在这个表中我想找到一个基于两个值的表。这样我想找到一个包含的表羊毛和 260 号。哈...

google-sheets datatable row multiple-columns spreadsheet

回答 1 投票 0

VBA 代码，用于在两列上旋转职位/姓名列表，向上一行（顶行将落在最后），但不包含空白单元格

VBA 代码可以将一行两列与位置/名称同步旋转，以便顶行始终落在最后一个位置。代码应该忽略空白单元格，只旋转 c...

excel vba rotation multiple-columns move

回答 1 投票 0

如何在 Power BI 中的同一个表中追加两列

我有四列：team1 和 team2，还有目标 1 和目标 2。我想在团队 1 和团队 2 的报告视图中列出前 5 个团队的目标，我如何将团队列附加在一起...