如何漂浮一個元素高於其前面的兄弟姐妹？

有沒有辦法允許浮動元素上升到它之前的兄弟元素之上？例如，採取下面的標記：如何漂浮一個元素高於其前面的兄弟姐妹？

<article class="main-article"> 

    <header class="article-header"> 
    ... 
    </header> 

    <section class="article-messages"> 
    ... 
    </section> 

    <section class="article-info-box"> 
    ... 
    </section> 

    <div class="article-content"> 
    ... 
    </div> 

    <aside class="article-sidebar"> 
    . 
    </aside> 

    <footer class="article-footer"> 
    ... 
    </footer> 

</article>

有了這個CSS：

.main-article { 
    position: relative; 
    width: 100%; 
} 
.article-header, 
.article-messages, 
.article-content, 
.article-footer { 
    position: relative; 
    float: left; 
    width: 75%; 
    clear: left; 
    margin-right: -100%; 
} 
.article-info-box, 
.article-sidebar { 
    position: relative; 
    float: right; 
    width: 25%; 
    clear: right; 
}

這將形成兩列，與.article頭，.article的消息，.article內容，和。文章頁腳全部位於左側，右側爲.article-info-box和.article-sidebar。不過，.article-info-box永遠不會超出.article-messages的頂部，即使這個空間中沒有任何東西。同樣，.article-sidebar永遠不會超出.article的內容。

有沒有什麼辦法讓.article-info-box一直浮到容器的頂部，.main-article，所以它與.article-header的頂部對齊，用.article-側邊欄在它下面浮動？

請注意，更改源訂單不是一個選項。還要注意，這些元素都不能有固定的高度。

來源

2014-02-09 jstoller

您的信息框不顯示在頂部的原因是因爲您的層次結構。在這種情況下，你想要做的是將信息框放在標題後面，這是因爲你的標題寬度爲75％，而信息框寬度爲25％，它將填充剩餘的空間。這裏是你應該爲這個實例編寫HTML代碼的方式，你的CSS很好，只需要去掉margin-right：-100％。

<head> 
<style> 
.main-article { 
position: relative; 
width: 100%; 
} 
.article-header, 
.article-messages, 
.article-content, 
.article-footer { 
position: relative; 
float: left; 
width: 74%; 
clear: left; 
} 
.article-info-box, 
.article-sidebar { 
position: inherit; 
float: right; 
width: 25%; 
clear: right; 
} 
</style> 
</head> 
<body> 
<article class="main-article"> 

<header class="article-header"> 
<h1>TEST</h1> 
</header> 

<section class="article-info-box"> 
<h2>right-article-info-box</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p> 
</section> 

<section class="article-messages"> 
    <h2>left-article-messages</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p> 
</section> 


<div class="article-content"> 
    <h2>left-article-content</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p> 
    </div> 

<aside class="article-sidebar"> 
    <h2>right-article-sidebar</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p> 
    </aside> 

    <footer class="article-footer"> 
    <h2>left-article-footer</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante orci, interdum in est sed, fermentum convallis libero. Curabitur ut dui aliquet, porttitor nibh vitae, ultrices enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam aliquet rutrum tortor, feugiat feugiat nisl lobortis vel. Nulla gravida et massa vel sagittis. Sed congue est et gravida venenatis. Vestibulum vehicula, nunc vitae tristique sollicitudin, augue ligula iaculis tortor, a convallis ipsum erat tincidunt augue.</p> 
    </footer> 

    </article> 
    </body> 
</html>

來源

2014-02-09 05:49:10 ahsesino

正如我所說的，更改源順序不是一個選項。它必須是標題，消息，信息框，內容，邊欄和頁腳。這部分是出於可訪問性原因，部分原因是我在構建響應式設計，所以這不是標記必須支持的唯一佈局。此外，爲了完成這項工作，我還必須移動邊欄。由於我使用的是網格系統，因此存在負邊距，但在這種情況下您是正確的，因此不需要這樣做。 – jstoller

只需添加另一個css規則，但僅限於具有負邊距的信息框。 .article-info-box { margin-top：-80px; } – ahsesino

基本答案是，使用浮動。除非你改變你說不能的源順序，否則你不能。哦，你可以用負邊距或相對定位來僞造它，但它不會響應。 –

如何漂浮一個元素高於其前面的兄弟姐妹？

回答

相關問題