[英]organizing absolutely positioned table
hello i was trying to put one table row over another i made a Section as a wrapper and 2 figures with divs inside the section i made it relative and the figures were absolute what troubles me is that when it set to absolute the table row becomes a column and i have no idea how to keep it as a row and just put the bottom row over the top one 你好,我试图将一个表行放在另一个表行上,我做了一个节作为包装器,并在该节中放了2个带有div的图形,使之成为相对图形,这些图形是绝对的,困扰我的是当它设置为绝对值时,该表行变成一个专栏,我不知道如何将其保持为一行,而将底行放在顶部
this is what i got to i tried alot of different useless tricks and im just stumped :O 这就是我要尝试的各种不同的无用技巧的结果,而我却感到很沮丧:O
section { display: table; display: block; width: 100%; border-spacing: 0.5em; vertical-align: middle; text-align: center; } figure { display: inline-block; display: table-row; max-width: 25%; } div.top { text-align: center; display: inline-block; background-color: grey; width: 200px; height: 200px; border: 10px solid rgba(0, 0, 0, 0.1); } div.bottom { text-align: center; display: inline-block; background-color: grey; width: 200px; height: 200px; border: 10px solid rgba(0, 0, 0, 0.1); }
<section style="position: relative;"> <figure style="position: absolute;"> <div class="top">H</div> <div class="top">G</div> </figure> <figure style="position: absolute;"> <div class="bottom">A</div> <div class="bottom">B</div> </figure> </section>
It becomes a columns because it wraps. 因为它包装,所以它成为一列。 When you give it absolute position it's "max-width" style is relative to "section".
当您给它绝对位置时,它的“最大宽度”样式相对于“截面”。
I don't know what you want to achieve but look here. 我不知道您要实现什么,但请看这里。
When figure have 100% it stays horizontal: https://jsfiddle.net/v0zq0en8/ 当数字具有100%时,它将保持水平: https : //jsfiddle.net/v0zq0en8/
width: 100%;
Another solution is to add "nowrap" to figure: https://jsfiddle.net/0twvzbaq/ 另一个解决方案是在图上添加“ nowrap”: https : //jsfiddle.net/0twvzbaq/
max-width: 25%;
white-space: nowrap;
In removing the position sets, both Divs line up as expected. 在删除职位集时,两个Divs都按预期排列。 Is this jsfiddle demo not what you are looking for them to do?
这个jsfiddle演示不是您想要他们做的吗?
<section>
<figure>
<div class="top">H</div>
<div class="top">G</div>
</figure>
<figure>
<div class="bottom">A</div>
<div class="bottom">B</div>
</figure>
</section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.