我需要将元素的宽度保持为其高度的百分比.因此,随着高度的变化,宽度会更新.
相反的情况可以通过使用填充顶部的%值来实现,但填充左边的百分比将是对象宽度的百分比,而不是其高度.
所以使用这样的标记:
<div class="box">
<div class="inner"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
我想用这样的东西:
.box {
position: absolute;
margin-top: 50%;
bottom: 0;
}
.inner {
padding-left: 200%;
}
Run Code Online (Sandbox Code Playgroud)
确保根据箱子的高度保持箱子的纵横比.高度是流动的,因为它的边距百分比 - 随着窗户高度的变化,盒子的高度也会变高.
我知道如何用JavaScript实现这一点,只是想知道是否有一个干净的CSS解决方案?
我刚刚升级到Visual Studio 2013并希望使用内置的git功能.
我有一个本地git存储库 - 有各种分支和历史 - 我和其他同事一起愉快地使用远程TFS git存储库.
在VS2013中,我可以看到本地存储库和交换机分支,提交,推送等,但是当我连接到团队项目时,它没有分支,也没有与本地存储库的连接.
我可以将远程克隆到新的本地文件夹,但不知道如何将现有文件夹链接到它.
这一切都与Windows的GitHub应用程序一起使用,但VS2013工具似乎不喜欢它.
有任何想法吗?
自从在多个iPhone和iPad上升级到iOS 7以来,我们已经看到在我们网站上的部分用户界面发生了一些非常奇怪的事情.
附加图像中的粉红色框位于绝对定位的父级内,它有两个绝对位于其中的白色div,每个div都有不同的不透明度.粉色圆圈只是一个div,其边界半径设置为圆形.此布局中根本没有图像.
出于某种原因,浏览器间歇地拉伸粉红色的div,但是我想不出任何会导致它的东西 - 如果我想的话,我不知道如何实现这个效果!
我认为它是浏览器中的一个错误,但我不知道如何修复它.
我没有包含任何代码,因为它真的非常简单,并且没有任何内容可以导致这种情况(实际上它在iOS6中有效).只是希望有人见过这个?
有任何想法吗?
CSS问题http://i41.tinypic.com/264289i.png
更新 响应cimmamon的评论,这里是代码:
<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
<div class="period3"></div>
<div class="period2"></div>
<div class="period1"></div>
<div class="nodeline colBk">
<div class="node colBrd"></div>
</div>
</div>
<div class="inner">
<div class="group first">
<div class="branch colBk"></div>
<a class="story">
<div class="strip colBk"></div>
<div class="caption">
<div class="text">
<p class="title">Test</p>
</div>
</div>
</a>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
适用于'期间'容器和子代的CSS:
.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; …
Run Code Online (Sandbox Code Playgroud) 我有一个HTML列表如下...
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
...我正在使用display: inline-block;
将列表项保存在一条水平线上.
该ul
的width
是有限的,我想用的时候它不适合成一个省略号截断的最后一个项目width
.
所以需要看起来像:
Some text Some more text Even mo...
我已经尝试使用text-overflow: ellipsis;
的ul
,但都没有效果.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
li {
display: inline-block;
margin-right: 10px
}
Run Code Online (Sandbox Code Playgroud)
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
这是一个小提琴