根據瀏覽器顯示在不同地方的圖像

我正在使用HTML和CSS構建一個非常簡單的網站。它由一個標題，一段文字和一幅圖像組成。根據瀏覽器顯示在不同地方的圖像

當我在Chrome瀏覽器上查看該網站時，所有三個對象的位置都很完美。但在Firefox和Safari中，它們是混亂的。當我對這兩者中的一個進行優化時，Chrome瀏覽器版本就會關閉。等

這裏的CSS：

img { 
position: fixed; 
bottom: 280px; 
right: 800px; 
}

和HTML：

<img src="bob.jpg" height="50%" width="20%">

有一個比較簡單的方法來解決這一問題？我可以根據瀏覽器指定位置 - 類似這樣嗎？

img { 
position: fixed; 
/* Chrome 
bottom: 350px; 
right: 925px; 
/* Firefox 
bottom: 200px; 
right: 800px; 
}

等

而第二個問題：我可以指定圖像有什麼屬性，使文本始終在圖像周圍包裹，而不是在前面或後面的渲染？

謝謝！

來源

2016-08-14 Gerrard Cap.

請解釋'fixed'位置的需要。 – Aziz

@Aziz沒理由。你會建議我用什麼來代替？ –

請您分享一下佈局應該如何的基本草圖？使用'fixed'通常用於應該留在視口中一個位置的元素（粘滯） – Aziz

如果您希望圖片居中且與頁面內容對齊，則無需添加任何其他CSS，因爲您已將text-align: center添加到body。

圖像將被居中，因爲它是內聯元素。此外，你的代碼有很多問題，考慮的簡化版本：

body { 
 
    background-color: white; 
 
    text-align: center; 
 
    font-family: "Courier New", Courier, monospace; 
 
} 
 

 
p { 
 
    text-align: left; 
 
    font-size: 12px; 
 
    max-width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
hr { 
 
    width: 50%; 
 
    margin: 3em auto; 
 
}

<div class="marquee"> 
 
    <h3>THE X-FILES EPISODE GENERATOR</h3> 
 
    <hr> 
 
    <p>Make your own episode!</p> 
 
    <p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p> 
 
    <hr> 
 
    <div class="wrap"> 
 
    <button onclick="sentenceLoad()">Generate</button> 
 
    </div> 
 
    <div class="container"> 
 
    <h5></h5> 
 
    </div> 
 
    <img src="https://bobbyfestgenerator.github.io/X.jpg" alt=""> 
 
</div>

使用CSS保證金，而不是重複<br>標籤
沒有必要重新定義字體，因爲它是從繼承body
將CSS規則添加到外部文件而不是內聯（例如，對於<hr>）
使用margin: 0 auto居中塊級元素，如<p>

的jsfiddle：https://jsfiddle.net/azizn/d1xmv65m/

來源

2016-08-14 14:53:42 Aziz

根據瀏覽器顯示在不同地方的圖​​像

回答

相關問題

根據瀏覽器顯示在不同地方的圖像