放置兩個「浮動：右」上方彼此

當我使用放置兩個「浮動：右」上方彼此

<html> 
    <body> 
    <p> 
     <img style="float:right" src="image1.svg"> 
    </p> 
    <p> 
     <img style="float:right" src="image2.svg"> 
    </p> 
    <p> 
     text... 
    </p> 
    </body> 
</html>

用含有

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" height="200" 
    viewBox="0 0 200 200" 
    version="1.1"> 
<g> 
    <path d="M 10 10 L 190 10 L 100 190 z" 
      fill="cyan" stroke="blue" stroke-width="3" /> 
</g> 
</svg>

和image2.svg

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" height="200" 
    viewBox="0 0 200 200" 
    version="1.1"> 
<g> 
    <path d="M 10 10 L 190 10 L 190 190 L 10 190 z" 
      fill="cyan" stroke="blue" stroke-width="3" /> 
</g> 
</svg>

兩個SVG image1.svg圖像儘管有</p><p>，圖像並排放置。用</br>替換這些並不會幫助。我如何強制這兩個圖像放置在另一個之上？不用說，我想避免構建這兩個圖像的組合。

來源

2011-12-09 Calaf

你爲什麼浮動他們，如果你不希望一個被對方身邊？ – Quentin

如果你真的想有他們單獨浮動，要添加clear: right;的風格對他們倆的。

如果您很高興將它們一起浮起來，然後將它們的封閉段落包裝在單個DIV中並將其浮動到右側。

來源

2011-12-09 16:39:24

充實下面第二個想法的代碼。無法應用第一個。 – Calaf

您可以通過將圖像合併到一個包含元素中的圖像並將該元素右移，同時將clear:both樣式應用於各個圖像本身來實現此目的。

Here is a working example

<p id="images"> 
    <img style="float:right" src="image1.svg" /> 
    <img style="float:right" src="image2.svg" /> 
</p> 
<p> 
    text... 
</p> 

#images{ 
    float:right; 
} 
#images img{ 
    clear:both; 
}

來源

2011-12-09 16:33:56

不清楚。謹慎闡述？ – Calaf

@Calef - 不確定如何更好地解釋...將兩個圖像放入一個父元素。浮動該父元素的權利。 '清楚：他們自己的形象。示例鏈接有效，您可以在那裏查看代碼。幫助？ –

我通常假設CSS文件是用於反覆出現的功能。只要有可能，一次性顯示方法應直接顯示在html中。隨意不同意。在這個例子中，css文件已經被打磨了，我不想爲這個小小的增加而觸摸它。這樣做意味着我必須在其他地方使用CSS文件進行調試。原則2（讓我們稱之爲）：隔離一個css文件中將包含在多個html文件中的功能。 – Calaf

Div是一個很好的提示。

注：

這是不必要的改變（已微調）CSS文件，爲簡單起見，不包括在這裏）。
沒有必要清楚：正確的圖像，只是不加它們在第一場。

<html> 
    <body> 
    <div style="float:right"> 
     <p> 
     <img src="image1.svg"> 
     </p> 
     <p> 
     <img src="image2.svg"> 
     </p> 
    </div> 
    <p> 
     text... 
    </p> 
    </body> 
</html>

來源

2011-12-09 17:12:32 Calaf

這應該是對您的問題的編輯，而不是答案。請修改您的帖子並刪除此答案。 –

放置兩個 「浮動：右」 上方彼此

回答

相關問題

放置兩個「浮動：右」上方彼此