如何在一個高度[CSS / HTML]上添加單獨的文本和單獨的圖像？
[英]How to add separate text and separate image on the one heigth [CSS/HTML]?
問題描述
我想像標題中所說的那樣在一個高度上設置圖像和段落。 我希望該圖像與段落的寬度和高度相同。
主要問題是，如果我嘗試使用我的容器（我真的不知道它是否是容器），則該圖像位於段落中。 我頭疼得很厲害，還沒有解決。 需要一些幫助。
這是我想要創建的頁面的代碼+圖片：
body { background-image: url(''); background-repeat: no-repeat; background-attachment: fixed; background-size: 100%; } .h1_main { text-align: center; text-shadow: #06FE35 1px 1px 20px; font-size: 50px; } .pretty_1 { margin-top: 50px; text-shadow: grey 1px 1px 15px; font-size: 40px; } .container { border: 7px solid #01FE30; margin-right: 75%; padding: 20px 30px 20px 30px; font-size: 30px; text-shadow: #F40752 1px 1px 50px; text-align: center; } .right_image { float: left; } .ecorp { text-shadow: red 1px 1px 6px; text-align: center; } .transparent { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; position: fixed; text-align: left; bottom: 0px; width: 100%; } .fsoc { font-size: 20px; text-shadow: red 2px 0px 0px; } .links { font-color: black; text-shadow: grey 1px 1px 10px; text-decoration: none; color: black; font-size: 26px; text-align: center; } .center { text-align: center; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>MR.Twister</title> <link rel='stylesheet' type='text/css' href='podstava.css'> </head> <body> <h1 class='h1_main'>Who is </h1> <div class='center'> <a href='index.html' class='links'>Main</a> <a href='about.html' class='links'> About</a> <a href='gallery' class='links'> Galley</a> </div> <hr> <p class='pretty_1'>Wiki Says:</p> <p> <p class="container"> - - - - - - - - - - - - - - - - - - - - - - - - - - - -<br /> <small>Hi there Hi there</small></br /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - <br /> You are the best thing to ever happen to me. You are the true definition of a true value. True friendship stands the test of time and you have shown me what it is to have real friends. I value your friendship and I will remain every grateful for your love. Thanks for being my friend. Cheers to our loving friendship.<font color='#6D202C'><small>E</small><small><small>Corp.</small></small></font></p> <div class='transparent'> <font class='fsoc'color='red'>all rights reserved (c)</font> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2019-02-24 06:19:53
有很多方法可以完成此操作，但是使用最新的CSS3 +屬性（例如Flex和Grid） ，可以創建所需的布局。 flex解決方案所需要做的就是指定容器的width: 100%; 為了使容器占據頁面的整個寬度，允許您自由布局，請設置其display: flex; 使用flex屬性並設置flex-direction: row; 使容器內的物品水平對齊。
然后分離在正確的內容div和在不同的左側用內容div與兩者都是在容器內部。
參考這個小提琴，我已經修復了您遇到的一些代碼問題。 另外，不要使用font標簽，因為HTML5不支持它 ，而使用style屬性。 https://jsfiddle.net/9oej1z6p/
如何在CSS中水平拉伸圖像並在HTML上顯示3張單獨的圖像
[英]How to horizontally stretch image in CSS and display it on HTML with 3 separate images
如何在 vue js 中添加 css 和 html 就像在單獨的文件中添加角度 css、html 和 typescript
[英]How add css and html in vue js Like an angular css ,html and typescript in separate file
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.