如何更改內容流？

Question

在這jsfiddle，我試圖創建一個書籤形狀。只有一個三角形需要改變它的位置。

<div id = "bookmark"> 
    <div id = "rectangle"></div> 
    <div id = "triangle-topleft"></div> 
    <div id = "triangle-topright"></div> 
</div> 

我可以很容易地使用相對定位和移動它，但我不想這樣做。我想要一個更有延展性的解決方案。

而不是形狀從上到下流動。我想讓最後一個形狀從左到右流動。所以有三種形狀，前兩種形狀是完美的，但第三種形狀需要放在第二種形狀的右側，而不是在第二種形狀的下面。

我可以用什麼CSS來做到這一點？

Answer 1

您可以將float: left添加到#triangle-topleft和margin-left: 100px到#triangle-topright。

要刪除不必要的標記，你也可以使用:before和:after僞元素，而不是#triangle-*。

Answer 2

首先你不必申報position: static;，因爲它是在默認情況下已經靜態的（除非你使用responsive design，你需要重新在分辨率下的某點的屬性值），其次，分配position: relative;您#bookmark和使第二個三角形position: absolute;

Demo

#bookmark{ 
    width: 200px; 
    position: relative; 
} 
#rectangle { 
    width: 200px; 
    height: 300px; 
    background: black; 
} 
#triangle-topleft { 
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-right: 100px solid transparent; 
} 

#triangle-topright { 
    position: absolute; 
    right: 0; 
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-left: 100px solid transparent; 
    bottom: 0; 
} 

---

注意：請務必不要讓你的第一個三角形position: absolute;否則您需要重新定位三角形。但這是最好的方法，因爲您已將absolute包裝在relative容器內。

---

您也可以看看這個真棒事情 - Font Awesome - Bookmark，你可以調整這個給你想要的任何大小。

---

你想的東西可以通過使用:before與content財產一起:after僞來達到的。所以你可以擺脫多餘的三角形元素。

---

正如我所說的，你可以用一個元素來創建這個東西。

#bookmark{ 
    width: 200px; 
    position: relative; 
    height: 300px; 
    background: black; 
} 

#bookmark:before { 
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-right: 100px solid transparent; 
    display: block; 
    content: ""; 
    position: absolute; 
    bottom: -100px; 
} 

#bookmark:after { 
    position: absolute; 
    right: 0; 
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-left: 100px solid transparent; 
    bottom: -100px; 
    display: block; 
    content: ""; 
} 

在這裏，我使用:before和:after僞，用display: block;和content: "";這是必不可少的，讓這件事的工作，也是我的定位都採用absolute設置爲-100

Demo值的元素（使用單個元素）

注意：:before和:after僞可以失敗舊版本的IE， 但您可以隨時使用polyfills使用CSS 3屬性，另外，對於 有關瀏覽器支持的更多信息，可以查看this了。

Answer 3

添加float:left;到#triangle-topleft和margin-left:100px;到#triangle-topright

#triangle-topleft { 
    position: static; 
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-right: 100px solid transparent; 
    float:left; 
} 
#triangle-topright { 
    position: relative; 
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-left: 100px solid transparent; 
    margin-left:100px; 
} 

jsFiddle example

Answer 4

添加顯示：內聯塊到兩個三角形狀。他們正在堆疊，因爲他們默認顯示：block。

Answer 5

僅需將＃float:left添加到＃triangle-topleft和＃triangle-topright就足夠了。

看到提琴：http://jsfiddle.net/nfxYE/