草庐IT

vertically

全部标签

html - Flex Grow until specific max-height inside a vertically centered div with 最小高度 100%

我需要一个100vh最小高度容器内的居中框,最小高度为100%,最大高度为600px。到目前为止这很容易。但在我居中的框中,我还有3个其他元素(标题、内容和页脚)。内容部分必须增长,直到达到所有可用空间(在这种情况下,它是父级的最大高度减去标题和gg部分)。这可以用flexbox实现吗?这是一个简短的涂鸦:我自己也尝试过,但是一旦我输入100%的最小高度而不是元素div的像素值,我就会遇到问题。知道如何解决这个问题并可以使用min-height100%吗?*{box-sizing:border-box;margin:0;padding:0;}.wrapper{background:rg

jquery - 响应式设计 : How to resize images/background images and align divs vertically?

我正在尝试响应式设计。我的图片目前没有调整大小。在我的标记中,我还将背景图像应用于某些需要调整大小的div。这是HTMLView:http://jsbin.com/emojeg/2请在此处查看代码:http://jsbin.com/emojeg/2/edit对于800像素到1100像素之间的屏幕宽度,我想调整图像的大小。对于低于800像素的任何内容,我想垂直对齐相框-无论屏幕宽度是否允许,每行1或2个。目前,当我将浏览器调整为更窄的宽度时,最多2个框架会换行到下一行,但如果我继续进一步调整大小时,相框的背景似乎被切断并且一些图像似乎消失了。不确定如何解决这个问题。

jquery - 响应式设计 : How to resize images/background images and align divs vertically?

我正在尝试响应式设计。我的图片目前没有调整大小。在我的标记中,我还将背景图像应用于某些需要调整大小的div。这是HTMLView:http://jsbin.com/emojeg/2请在此处查看代码:http://jsbin.com/emojeg/2/edit对于800像素到1100像素之间的屏幕宽度,我想调整图像的大小。对于低于800像素的任何内容,我想垂直对齐相框-无论屏幕宽度是否允许,每行1或2个。目前,当我将浏览器调整为更窄的宽度时,最多2个框架会换行到下一行,但如果我继续进一步调整大小时,相框的背景似乎被切断并且一些图像似乎消失了。不确定如何解决这个问题。

html - 盒子中的多行有省略号和垂直对齐中间

我有包含动态内容和多行文本的容器。如果文本不适合容器,我想显示省略号(...)。它也应该垂直居中对齐。我创建了一个Codepenhttp://codepen.io/anon/pen/ewnxG使用此HTML:verticallycenteredwithverticallycenteredwithhellooneline和这个CSS:.vertically-centered{border:1pxsolidred;height:6rem;overflow:hidden;font-weight:bold;font-size:2.5rem;text-overflow:ellipsis;widt

html - 盒子中的多行有省略号和垂直对齐中间

我有包含动态内容和多行文本的容器。如果文本不适合容器,我想显示省略号(...)。它也应该垂直居中对齐。我创建了一个Codepenhttp://codepen.io/anon/pen/ewnxG使用此HTML:verticallycenteredwithverticallycenteredwithhellooneline和这个CSS:.vertically-centered{border:1pxsolidred;height:6rem;overflow:hidden;font-weight:bold;font-size:2.5rem;text-overflow:ellipsis;widt

javascript - Jquery Draggable - center cursorAt Vertically

我正在处理我的第一个JQuery项目,但遇到了一些障碍。我正在尝试允许对一组嵌套列表(ul)进行拖放重新排序。除定位外,一切正常。目标是使可拖动对象相对于光标垂直居中(水平移动受到限制),以便可以轻松删除嵌套在其中的元素的li。这是相关的JS:$(function(){$(".organizerlink").draggable({axis:"y",containment:"#organizer",scroll:false,helper:"original",revert:"invalid",cursorAt:{top:Math.round($(this).outerHeight()/2

javascript - Jquery Draggable - center cursorAt Vertically

我正在处理我的第一个JQuery项目,但遇到了一些障碍。我正在尝试允许对一组嵌套列表(ul)进行拖放重新排序。除定位外,一切正常。目标是使可拖动对象相对于光标垂直居中(水平移动受到限制),以便可以轻松删除嵌套在其中的元素的li。这是相关的JS:$(function(){$(".organizerlink").draggable({axis:"y",containment:"#organizer",scroll:false,helper:"original",revert:"invalid",cursorAt:{top:Math.round($(this).outerHeight()/2

html - 间隔均匀,对齐的水平导航链接 : How to remove vertical space in empty :after content

我正在尝试实现这样的水平导航链接:|--------------------------------------||Link1L2LongLink3Link4Link5||--------------------------------------|规则:链接间隔均匀(每个链接之间的空白量相同)链接可以是可变宽度的总的来说,链接延伸到其容器的整个可用宽度第一个和最后一个链接与其容器的边缘对齐(链接是对齐的)适用于IE8+CSS/HTML解决方案,无JavaScript无法设置特定的容器高度或链接高度不能预先计算和硬编码链接之间的空间(链接数量以后可能会改变)Thissolution几乎

html - 间隔均匀,对齐的水平导航链接 : How to remove vertical space in empty :after content

我正在尝试实现这样的水平导航链接:|--------------------------------------||Link1L2LongLink3Link4Link5||--------------------------------------|规则:链接间隔均匀(每个链接之间的空白量相同)链接可以是可变宽度的总的来说,链接延伸到其容器的整个可用宽度第一个和最后一个链接与其容器的边缘对齐(链接是对齐的)适用于IE8+CSS/HTML解决方案,无JavaScript无法设置特定的容器高度或链接高度不能预先计算和硬编码链接之间的空间(链接数量以后可能会改变)Thissolution几乎

html - CSS flexbox : How to vertically align "flex items" to middle without losing flex item height?

目前我的“flex”元素看起来像这样(垂直对齐:顶部)..._____________________________________1_____________________________________2_____________________________________3_____________________________________4_____________________________________我的目标是让它们看起来像这样(垂直对齐:中间)..._____________________________________1_____________