2016-11-09 63 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

相關問題