我正在嘗試使用標題和標題右側的影像制作 html 標題。但是當螢屏尺寸改變時，影像會在標題上滑動。如何讓它留在原地？我已經嘗試了所有我能想到的但沒有運氣。我想出的最好的方法是將影像放在標題下方。然后它保持它的位置。但我寧愿把它放在一邊。
這是我的代碼：
<body>
<header>
<h1>Title text</h1>
<p>some text</p>
<div class="picture">
<img src="assets/images/xxxx.png">
</div>
</header>
some code ....
</body>
和 style.css 中的標題部分：
header { padding: 25px 20px 40px 20px; margin: 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; text-align: center; background: #15253e; box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.75); z-index: 99; -webkit-font-smoothing: antialiased; min-height: 76px; }
header h1 { font: 42px/50px 'Copse', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #f3f3f3; text-shadow: 0px 2px 0px #235796; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; }
header p { color: #f3f3f3; text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0; font-size: 20px; margin: 10px; }
header img { width: 60px; height: 100px; position: fixed; right: 900px; top: 15px; text-align: right; }
header .picture { display: block; }
我會添加一張圖片，但我沒有這樣做的權利。所以這里有一個頁面是一個示例，它可能會讓人無法理解我正在嘗試做的事情。有一個標題和一個箭頭影像的圖片。我的目標是在標題文本的右側獲取影像。如果螢屏尺寸發生變化，請將其保留在那里。
uj5u.com熱心網友回復：
您為標題設定了一個屬性，text-align: center;它將您的影像與中心對齊，因為它是行內元素。你有很多選擇來改變它：
- 放
text-align: right; - 將您的影像放入塊元素中，例如
<div> - 將影像的屬性更改為阻止或彎曲...例如：
display: block;并更改 div 的位置float:right - 其他的東西
看例子W3school
像Codepen一樣使用 Sandbox
uj5u.com熱心網友回復：
我真的希望現在就是這樣：
我把整個內容放在一個flexbox，所以很容易對齊。您可以修改標題justify-content或align-items稍微更改布局。
內部#title的text-align，也可以改變center或left為例子。
我知道在代碼預覽中它看起來很大，但在全屏中它可以作業。您可以更改height中的header以消除該問題。
html,
body {
margin: 0;
}
header {
padding: 20px 40px;
background-color: gray;
width: 100%;
top: 0;
position: sticky;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
max-height: 30vh;
}
#title {
text-align: right;
}
header h1 {
font: 42px/50px 'Copse', "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #f3f3f3;
text-shadow: 0px 2px 0px #235796;
white-space: nowrap;
overflow: hidden;
margin: 0;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
header p {
color: #f3f3f3;
text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
font-size: 20px;
margin: 0;
}
header img {
height: 20vh;
}<html>
<body>
<header>
<div id="title">
<h1>Title text</h1>
<p>some text</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png">
</header>
<div>
spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
<br> spacefiller
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368047.html
上一篇：為什么將變數系結到img標簽中的src引數在vuejs中不起作用？
下一篇：無法在輪播中插入本地影像