Question

＆＃13;

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    background: transparent none repeat scroll 0% 0%;
    font-size: 100%;
    vertical-align: baseline;
}

.wrapper {
	position:relative;
	white-space:nowrap;
	overflow:hidden;
}

.item {
	/*position:absolute;*/
	display:inline-block;
	width:25%;
	height:25vw;
}


.item1 {
	background-color:wheat;
}.item2 {
	background-color:pink;
}.item3 {
	background-color:beige;
}.item4 {
	background-color:gainsboro;
}.item5 {
	background-color:coral;
}


.previous-arrow, .next-arrow {
	width:30px;
	height:50%;
	top:50%;
	position:absolute;
	opacity:0.7;
	color:transparent;
	background-repeat:no-repeat;
	margin-top: -30px;
	
	display:none;
}

.previous-arrow {
	background-image:url(a2.png);
	left:0px;
}

.next-arrow {
	background-image:url(b2.png);
	right:0px;
}

.previous-arrow, .next-arrow {
	opacity:1;
}

body {
	/*background-color:black;*/
}

/****************************************************************************************************************/

.name-nic-container {
	position:absolute;
	left:10%;
	bottom:10%;
	width:90%;
}

.name {
	font-size: 171.579%;
	color: black;
}

.nic {
	font-size: 114.737%;
	color: black;
	font-weight:100;
	display:block;
	line-height:0.9;
}

＆＃13;

<div class="wrapper"><!--
		--><a class="previous-arrow" href="">&lt;</a><!--
        --><a id="1" class="item item1 wheat"><!--
              --><span class="name-nic-container"><!--
                --><span class="name">Amy</span><!--
                --><span class="nic">234</span><!--
              --></span><!--
          --></a><!--
		--><a id="2" class="item item2 pink"><!--
              --><span class="name-nic-container"><!--
                --><span class="name">Bob</span><!--
                --><span class="nic">344</span><!--
              --></span><!--
          --></a><!--
		--><a id="3" class="item item3 beige"><!--
              --><span class="name-nic-container"><!--
                --><span class="name">Jazz</span><!--
                --><span class="nic">345</span><!--
              --></span><!--
          --></a><!--
		--><a id="4" class="item item4 gainsboro"><!--
              --><span class="name-nic-container"><!--
                --><span class="name">Zee</span><!--
                --><span class="nic">675</span><!--
              --></span><!--
          --></a><!--
		--><a id="5" class="item item5 coral"><!--
              --><span class="name-nic-container"><!--
                --><span class="name">Ana</span><!--
                --><span class="nic">453</span><!--
              --></span><!--
          --></a><!--
		--><a class="next-arrow" href="">&gt;</a>
		
	</div>

＆＃13;

JSFiddle.

在此SSCCE中，我希望.name和.nic在.name-nic-container内得到底部对齐。但结果是所有.name和.nic都相互污染了。我给了.name-nice-container一个width:90%并期望它获得90％的父.item，但似乎有更长的宽度。

我认为这可能是由position:absolute .name-nic-container引起的（因为绝对定位的元素会被渲染出来）。所以我试图做的就是给它position:relative。结果是this，除了.name和.nic未与其父级的底部对齐外，效果更好。 bottom:10%上的.name-nic-container似乎比它的当前位置给它一个底部偏移，我认为这可能是相对位置的正常行为。

我给了它一个负底部偏移bottom: -50%，结果是this，而似乎正确，因为在真实程序中，文本打印在{{ 1}}和.name是动态的，如果它足够长，可以跨越多行呢？ .nic的高度（如果要在.name中打印的文字非常长）将向下展开。但我需要的是它应该与底部对齐 - 即如果文本更长，.name应该向上扩展（我希望我说清楚）。

然后我尝试span display:table .name-nic-container display:table-row .name和.nic，.name-nic-container {}} {}给height:100% .name .nic会产生this。

那么我应该怎样做才能让.name-nic-container和x = squareGrid(400, 2, 5) x.edges // edges x.pts //pts与data[0] // edges data[1] //points 的底部对齐并且左右偏移量较小（如10px或10％等 - 我认为填充会做到这一点）？

Answer 1

将position: relative添加到元素＆＃39;父母定位为absolute。

具有absolute定位的元素将相对于具有position属性的最近父级定位。由于.item没有明确的定位规则，因此您的.name-nic-container元素相对于您的body元素定位自己。您可以阅读有关定位here的更多信息。

.item {
  position: relative;
}

你的.name包裹的原因是由于你在下面的代码，删除它并将它包装。

.wrapper {
  white-space: nowrap;
}

如何将这些子div与其相对定位的父级的底部对齐？

1 个答案: