我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？
我不能用overflow-x: hidden.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div> …我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.
我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.
.item填充父级的高度与文本垂直对齐到中间？这里的示例jsFiddle,应该在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div> …我有两个高度为90%的div,但显示效果不同.
我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.
有人能解释我为什么会遇到这个问题吗？
以下是我的代码:
<div style="height: 90%">
<div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
<tabset>
<tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
disabled="tabs[0].disabled">
</tab>
<tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
disabled="tabs[2].disabled">
</tab>
</tabset>
</div>
<div id="leaflet_map" ng-controller="iPortMapJobController">
<leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
</div>
</div>
我有几个列,我使用flex给出相等的宽度.每个都包含img标签,我希望这些图像能够展示object-fit: cover尺寸.
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.test {
flex: 1;
margin-right: 1rem;
overflow: hidden;
height: 400px;
}
img {
object-fit: cover;
}<div class="container">
<div class="test"><img src="http://placehold.it/1920x1080"></div>
<div class="test"><img src="http://placehold.it/1920x1080"></div>
<div class="test"><img src="http://placehold.it/1920x1080"></div>
<div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>图像没有调整大小,如本演示中所示.这是为什么？
下面的代码显示了我在Chrome 60和Firefox 55中调整窗口大小时的预期行为(但在iOS Safari 10.3中没有;这很可能是另一个问题,为什么它在Safari中行为不当).
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: lightgrey;
}
.container {
box-sizing: border-box;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, calc((60vh - 12px)/3));
/*grid-template-rows: 1fr 1fr 1fr;*/
/*grid-template-rows: auto auto auto;*/
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
}
img {
box-sizing: border-box;
display: block;
object-fit: contain;
width: 100%;
height: 100%;
margin: …