2016-11-09 81 views
1

如何将父母的高度(relative位置)设置为孩子的身高?父母的相对位置增长以适合孩子的绝对位置高度

看看this pen看到它在行动。

blockquote { 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    color: #edf0f9; 
 
    overflow: hidden; 
 
} 
 
blockquote img { 
 
    width: 5.5rem; 
 
    height: 5.5rem; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 1rem; 
 
    z-index: 2; 
 
} 
 
blockquote .name-block { 
 
    padding: 0.1rem 2rem 0.1rem 0.5rem; 
 
    background-color: #6e7480; 
 
    font-size: 0.8rem; 
 
    position: absolute; 
 
    top: 2rem; 
 
    right: 5rem; 
 
    z-index: 1; 
 
} 
 
blockquote .pos-block { 
 
    padding: 0.1rem 3rem 0.1rem 0.5rem; 
 
    background-color: #6e7480; 
 
    font-size: 0.8rem; 
 
    position: absolute; 
 
    top: 3.6rem; 
 
    right: 4rem; 
 
    z-index: 1; 
 
} 
 
blockquote .txt-block { 
 
    background-color: #2b2d32; 
 
    padding: 5rem 1rem 1rem 1.8rem; 
 
    position: absolute; 
 
    top: 1.5rem; 
 
    right: 0; 
 
} 
 
blockquote .txt-block:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 1rem; 
 
    top: 4.5rem; 
 
    border-left: 2px solid #6e7480; 
 
    height: calc(100% - 5rem); 
 
}
<blockquote> 
 
    <img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" /> 
 
    <span class="name-block">John Doe</span> 
 
    <span class="pos-block">A mannager</span> 
 
    <div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores 
 
    incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate 
 
    voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate 
 
    vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus. 
 
    Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea! 
 
    </div> 
 
</blockquote>

我的元件位置设置为relative和其的子设置为absolute,并且当设定为hidden母体的所述overflow的高度自动设置为0,并且内容只显示在overflow: visible或高度严格设置。

+0

你可以尝试改变你的问题吗?我不认为你想要达到的目标是明确的。至少对我来说不是。 –

+1

[使绝对定位的div扩展父div高度]的可能的重复(http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height) –

+1

可能重复的http:/ /stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height –

回答

1

当你定位元素absolute,它被取出正常流动的等(这是你的父母relative元素)将具有零高度。

现在,如果您使用overflow: hidden上的,它会隐藏一切。

所以最好的办法是把东西就正常流动这将是txt-block - 删除absolute定位,并给予margin-top,以获得预期的效果 - 见演示如下:

blockquote { 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    color: #edf0f9; 
 
    overflow: hidden; 
 
} 
 
blockquote img { 
 
    width: 5.5rem; 
 
    height: 5.5rem; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 1rem; 
 
    z-index: 2; 
 
} 
 
blockquote .name-block { 
 
    padding: 0.1rem 2rem 0.1rem 0.5rem; 
 
    background-color: #6e7480; 
 
    font-size: 0.8rem; 
 
    position: absolute; 
 
    top: 2rem; 
 
    right: 5rem; 
 
    z-index: 1; 
 
} 
 
blockquote .pos-block { 
 
    padding: 0.1rem 3rem 0.1rem 0.5rem; 
 
    background-color: #6e7480; 
 
    font-size: 0.8rem; 
 
    position: absolute; 
 
    top: 3.6rem; 
 
    right: 4rem; 
 
    z-index: 1; 
 
} 
 
blockquote .txt-block { 
 
    background-color: #2b2d32; 
 
    padding: 5rem 1rem 1rem 1.8rem; 
 
    margin-top: 1.5rem; 
 
} 
 
blockquote .txt-block:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 1rem; 
 
    top: 4.5rem; 
 
    border-left: 1px solid #6e7480; 
 
    height: calc(100% - 5rem); 
 
}
<blockquote> 
 
    <img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" /> 
 
    <span class="name-block">John Doe</span> 
 
    <span class="pos-block">A mannager</span> 
 
    <div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores 
 
    incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate 
 
    voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate 
 
    vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus. 
 
    Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea! 
 
    </div> 
 
</blockquote>

让我知道你的想法,谢谢!

+1

耶,我做同样的事情... –

0

您已设置最小高度或高度。

blockquote { 
    position: relative; 
    width: 100%; 
    height: auto; 
    margin: 0 auto; 
    color: #edf0f9; 
    overflow: hidden; 
    min-height: 100px; 
} 

http://codepen.io/hemedani/pen/vyNXJL

相关问题