CSS flexbox: 3列为2+1

文章/答案/技术大牛

发布

0回答

css、flexbox

我目前正在转换一个旧页面，不再使用<table>布局，并且一直在尝试使用flexbox实现这种行为。目标是有3列，前两列水平和垂直居中，最后一列包含大量文本，显示ok。padding: 5px; border: 1px solid #000;} flex: 3;}

浏览 1提问于2017-01-09得票数 0

回答已采纳

1回答

具有可变高度的引导行元素

twitter-bootstrap

我目前正在开发一个使用Twitter引导的网站。我的设计中的列数因视口大小而异，这使我无法使用创建几个.row包装器来分离元素。我的唯一解决方案是设置列表中元素的预定义高度，以确保在显示下一个元素(在新行上)时不会发生“跳转”。我还尝试使用javascript，找到元素的最大值，然后将所有元素设置为这个高度，但是这是一个糟糕的解决方案，因此图像高度

浏览 0提问于2015-06-02得票数 5

2回答

使悬停时出现挠曲箱

html、css、flexbox、hover、display

我需要一些帮助的css问题。我实际上是在做一个带有双动画效果的动画勾选按钮。你可以看到我的目标是什么： display: none; display: block;<div class="

浏览 3提问于2022-06-15得票数 0

回答已采纳

3回答

SQL查询是否将两个表中的两列合并到结果表的一列中？

sql、select、db2

我有以下表格： ID 2T21 PSTN3 ADSLID DEV3 2G 1 PSTN1 3G3 ADSL如何合并这个？输出表中一个id的总数应该是T2+T3 (FOR ID

浏览 3提问于2012-10-03得票数 4

1回答

帮助在边框JS中组织用户输入

javascript、html、css

我目前正在创建一个使用HTML，CSS和JS的待办事项列表程序。我的程序目前的一个问题是，当你选择运行它时，添加到列表中的项目会部分阻止我程序中的add按钮。

浏览 15提问于2021-11-05得票数 0

回答已采纳

5回答

防止flex项高度展开以与其他flex项匹配

html、css、flexbox

我在一个容器中有两个元素，它们是通过使用flex框并行的.在第二个元素(.flexbox-2)上，我在CSS中设置它的高度。然而，第一个元素(.flexbox-1)将匹配.flexbox-2的高度。我如何阻止.flexbox-1与.flexbox-2的高度匹配，而只保留它的自然高度？-1 { border: solid 3px red;.flexbox-2 { b

浏览 2提问于2014-12-20得票数 121

回答已采纳

1回答

如何限制百分比CSS3网格列的宽度？

css、css-grid

使用CSS flexbox，我将使用这样的解决方案：.flexbox-layout {} flex: 1 1 30%;: lightgreen;<p>Layout based on CSS flexbox:</p> <div class="

浏览 1提问于2017-11-21得票数 6

6回答

具有自动宽度中心列的三列布局

html、css

我试图创建3列布局，其中的结构应该是主列，左列，右列。主列为自动宽度，以填充页的其余部分.第二个解决方案是使用flexbox进行布局，它是非常好的解决方案，但我不能使用它，因为IE9不支持这种CSS样式。<---Left-----><------------------main------------------><---right-----> 在没有任何JavaScript的纯C

浏览 2提问于2015-03-06得票数 1

3回答

我正在使用CSS flexbox来构建一个可伸缩的、响应式的网格。当将Google图表应用于其中一个flexbox项目时，该项目的大小会发生如此微小的变化。这足以使网格失去对齐。将Google chart应用于项目6之前的Flexbox网格：将Google chart应用于第6项后的Flexbox网格：Flexbox网格的加载速度比Google图表快，因此网格最初是正确加载的flex-flow: column;} #ite

浏览 0提问于2016-03-29得票数 16

回答已采纳

1回答

Thymeleaf支持挠性盒吗？

java、spring、spring-boot、pdf、thymeleaf

我有一个Java/SpringBoot服务，它使用Thymeleaf将其他位置的HTML和CSS片段组装成PDF文档。我注意到，我在文档中插入的CSS使用了Flexbox属性：display: flex。然而，Thymeleaf似乎不遵守这些CSS规则。Thymeleaf是否支持Flexbox和CSS3特性？<head> [(${css</em

浏览 6提问于2021-05-19得票数 1

回答已采纳

2回答

如何正确地居中对齐mat-chip-list？

html、css、layout、flexbox、angular-material

/mat-chip> <mat-chip>CSS

浏览 17提问于2021-04-18得票数 0

1回答

处理我的第一个CSS网格。在网格定位和对象重叠方面有问题

html、css

我想要一个3x2网格覆盖页面的底部40%。我似乎不能移动div，并且对象重叠。https://jsfiddle.net/draymon/r7538o2x/3/#&togetherjs=ymVMBJNyuV body, height:display: grid; width: 100%; grid-template-columns: repeat(3,

浏览 11提问于2019-09-14得票数 0

1回答

Gridbox CSS: XS上的响应/浮动主要部分

css

<a href="https://www.w3schools.com/css/css_rwd_grid.asp">https://www.w3schools.com/css/css_rwd_grid.asp<br></a> <div class="box c hidden-sm h

浏览 3提问于2017-10-26得票数 1

回答已采纳

2回答

删除CSS网格中的"Align-items“空间

html、css、css-grid

我正在尝试使用CSS Grid作为2d替代方案来填充我正在创建的一个小型测试博客的空间。我遇到了一个关于定位的小问题。但是，我希望视图看起来像这样：目前，我的代码结构如下：.articles { display: grid;

浏览 2提问于2017-08-16得票数 2

1回答

如何用flexbox动态实现3列3行布局

css、reactjs、layout、flexbox、next.js

我需要在nextjs上动态布局，3列3行，依此类推。实际上我用的是flexbox。有没有可能只用flexbox，Reactbootstrap或一些CSS就能做到这一点？ 

浏览 4提问于2021-09-29得票数 0

1回答

用React迭代数组的最佳方法

javascript、reactjs、arrays、react-hooks

'></div> <div id='3' className='flexbox-item-one'></div> </div>

浏览 1提问于2022-07-24得票数 0

回答已采纳

2回答

有没有可能把flexbox和Bootstrap结合起来？

twitter-bootstrap、css、twitter-bootstrap-3、flexbox

有没有办法在同一项目中使用CSS3 Flexbox和Bootstrap？我的意思是，如果我像这样使用CSS Flexbox代码：flex-flow: row wrap;align-items一切都很好，直到我把链接到Bootstrap CSS文件(或CDN)。在那之后，一切都搞砸了。谢谢

浏览 0提问于2016-05-21得票数 0

2回答

为什么我不能用flexbox居中显示这些项目？

html、css、flexbox

------------------------------------------------------------------------ .flexbox-container: 200px; min-height: 200px; <!html> <head>

浏览 0提问于2021-04-20得票数 0

2回答

CSS --可以在列中重新创建复选框吗？

html、css

这是一个简单的图表，我的意思是：[ ] Checkbox 1[ ] Checkbox 3[ ] CheckboxCheckbox 9[ ] Checkbox 1 [ ] Checkbox 8[ ] Checkbox 3Checkbox 7[ ] Checkbox 1 [ ] Checkbox 6 [ ] Che

浏览 3提问于2013-10-21得票数 3

回答已采纳

2回答

你能做一个嵌套式的挠曲箱吗？

html、css、flexbox

.flexbox { flex-wrap: wrap; flex: 1 1 auto; <div class="flexbox-elemen

浏览 1提问于2018-05-13得票数 3

回答已采纳

点击加载更多