繁体   English   中英

如何获得与文本量CSS相关的边距

How to get margin to be relative to text amount css

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我在Wordpress博客中创建了一个特色区域,为此,我不得不使用z-oindex和绝对定位; 在文本上方放置文本。 但是,只要我的文本超过一定数量,就可以进行绝对定位,布局就会开始中断。 有没有一种方法可以根据文本的长度有条件地更改上边距? (不使用javascript)

这是我的jsfiddle: https ://jsfiddle.net/7vkcLdmq/

 #featured_home { width: 960px; height: 325px; } #featured_home a { text-decoration: none; color: white; } .sticky { margin: 10px; } .desc { overflow: hidden; height: 265px; } .sticky img { width: 120%; height: auto; z-index: -15; position: relative; } .sticky h2 { z-index: 10; position: relative; display: block; max-width: 330px; } .sticky:nth-child(1) { width: 490px; height: 265px; overflow: hidden; float: left; margin-left: 0px; } .sticky:nth-child(1) h2 { color: white; font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 22px; padding: 10px; background-color: rgba(218, 24, 114, 0.75); z-index: 10; position: absolute; display: inline-block; margin-top: 223px; padding-right: 183px; max-width: 298px; } .sticky:nth-child(2) { width: 215px; height: 122px; overflow: hidden; float: right; margin-right: 0; } .sticky:nth-child(2):hover { background-color: rgba(218, 24, 114, 0.75); transition: all 0.5s ease-in-out; } .sticky:nth-child(2) h2 { display: none; } .sticky:nth-child(2):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.5s ease-in-out; } .sticky:nth-child(3) { width: 215px; height: 122px; overflow: hidden; float: right; } .sticky:nth-child(3):hover { background-color: rgba(104, 182, 109, 0.75); transition: all 0.5s ease-in-out; } .sticky:nth-child(3) h2 { display: none; } .sticky:nth-child(3):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.5s ease-in-out; } .sticky:nth-child(4) { width: 215px; height: 122px; overflow: hidden; float: right; margin-right: 0; } .sticky:nth-child(4):hover { background-color: rgba(254, 162, 63, 0.75); transition: all 0.3s ease-in-out; } .sticky:nth-child(4) h2 { display: none; } .sticky:nth-child(4):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.3s ease-in-out; } .sticky:nth-child(5) { width: 215px; height: 122px; overflow: hidden; float: right; } .sticky:nth-child(5):hover { background-color: rgba(78, 181, 224, 0.75); transition: all 0.3s ease-in-out; } .sticky:nth-child(5) h2 { display: none; } .sticky:nth-child(5):hover h2 { font-family:'Soho Gothic Pro', arial, sans-serif; font-size: 20px; line-height: 1.2em; display: inline-block; z-index: 10; position: absolute; max-width: 200px; padding: 10px; transition: all 0.3s ease-in-out; } 
 <div id="featured_home"> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2015/01/08/the-best-engineering-of-2014/">The best engineering of 2014</a></h2> </div> <img width="600" height="338" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/hand.jpeg" class="attachment-large wp-post-image" alt="hand"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/12/11/girls-who-code-gender-parity-by-2020/">Girls who Code – gender parity by 2020</a></h2> </div> <img width="600" height="400" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/H1B8349-1280x853-1024x682-1024x682.jpg" class="attachment-large wp-post-image" alt="H1B8349-1280x853-1024x682"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/12/10/nobel-prize-winners-grid-cell-dress/">Nobel Prize winner's 'Grid Cell' dress</a></h2> </div> <img width="600" height="429" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/hubbble-2.jpg" class="attachment-large wp-post-image" alt="hubbble-2"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/11/21/code2040-championing-diversity-in-tech/">Code2040 – championing diversity in tech</a></h2> </div> <img width="560" height="373" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/laura.jpg" class="attachment-large wp-post-image" alt="laura"> </div> </article> <article class="sticky"> <div class="desc"> <div class="desc_over"> <h2><a href="http://stylrs.com/ctf/2014/11/13/4d-printing/">4D Printing</a></h2> </div> <img width="600" height="338" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/4dprint-1024x576-1024x576.jpg" class="attachment-large wp-post-image" alt="4dprint-1024x576"> </div> </article> </div> 

还有另一种方法可以解决此问题?

1 个回复

使用bottom:0; position:absolute而不是使用margin-top ,它将按您期望的那样工作。 这样,文本将从底部扩展。

给出父母的相对位置:

.desc {
    position:relative;
}

将以下样式添加到粘性h1

.sticky:nth-child(1) h2 {
    position: absolute;
    botton:0;
    margin: 0;
}

JsFiddle示例

1 CSS-根据文字的数量,图片的边距有所不同

我有一个容器div(显示为蓝线),它具有设置的宽度和可变的高度,具体取决于内部的内容。 div可以包含文本和图像。 文本始终向左浮动,图像始终向右浮动。 除左侧(靠近文字)外,图片的每一边有2px的空白。 如果文本不适合图像的旁边,我希望它可以环绕图像,但也要留有10px的空白。 ...

2 如何在CSS的flex-item中设置相对边距?

我有{display: flex} div 。 它包含24个元素(一天中的小时,一div是一小时)。 每24个元素的宽度都具有响应性: {flex-grow:1} 每小时包含一些事件。 每个事件都有startTime和endTime。 例如,我有一个事件开始于8.00,结束于8.2 ...

3 如何使用jQuery获取相对值的填充或边距值

如果我有一个CSS样式的元素,如代码 我如何使用jQuery将padding-left值作为1em而不是像素? 这只返回像素,但我希望它返回代码中的真实内容,在这种情况下,相反值为1em。 怎么样 ? 谢谢你的指导。 曲 ...

2009-06-17 19:50:28 1 20346   jquery
4 使用CSS将文字溢出到页边距

如何防止此文本跳到新行并溢出到页边距? 我尝试了文本溢出,但是它似乎不起作用。理想情况下,它会从左边距溢出并消失到右边距。 有什么建议吗? .section-overflow { background-color: green; font-size: 2rem; text-o ...

6 jQuery:基于容器中元素数量的CSS保证金?

我正在尝试使用jquery创建一个简单的拼贴创建器。 我需要做的是在每个元素(拼贴画)之间留出1%的余量。 但与此同时,我需要拼贴从他们的容器中获得0余量。 我希望这是有道理的。 我已经创建了这个FIDDLE,所以你知道我的意思。 当你运行代码时,只需单击按钮4次, ...

7 使用CSS设置相对于另一个对象的边距?

我想知道是否有可能使div的边距定位相对于另一个对象而不是相对于视图窗格的边缘。 这是我正在处理的页面: http : //www.pikefin.com/phptest/site/main/index3.php 我在div周围放置了临时边界以协助定位。 查看文本“我们提供财务数据 ...

2011-12-15 15:38:28 2 1728   html/ css
8 CSS显示:行内边距与位置:相对

我想在标题中简单地在左侧徽标和右侧购物车图片之间放置一个电话号码。 因此3 div的水平内容。 为此,我在徽标后使用了带有display:inline-block和100px边距的div。 我不得不在CSS中放一个@media以便在移动时对其进行整理,因为很大的余量使它显得有些杂乱。 ...

2015-10-21 14:29:44 2 90   html/ css
9 相对于其父级未设置CSS边距

新手问题警报,请看以下示例: http : //codepen.io/cguo/pen/mVNgvG h1元素的页margin-top为60像素。 即使h1元素位于container div内, margin-top也不是相对于container设置的,而是相对于页面顶部的设置。 ...

2016-02-27 10:18:54 1 96   html/ css
10 CSS相对位置未显示上边距

我的客户需要屏幕中间的网页。 为此,我在名为mainpage的div中声明了整个网页。 CSS: 但是上述CSS不会垂直显示在屏幕中间。 如果我给出absolute或fixed ,则它在屏幕垂直方向上居中,但在水平方向上则向右对齐! 如何获得理想的结果? 编辑:我的HTML ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM