[英]How to properly right-align text to apeear next to an image using HTML and CSS
在我對類似問題投反對票或標記之前，我在堆棧上進行了搜索，但需要澄清，因為我是 web 設計的初學者，並且在完全理解術語方面存在一些問題。 對於背景，我正在創建一個個人資料頁面，其中用戶圖片位於屏幕左側，圖片右側應該是包含滾動條的信息部分。 我使用了一個 div，我得到了滾動條，但它直接出現在圖像下方。 我需要它在它旁邊。 我嘗試使用類、填充和邊距來使其居中，但我無法移動小節或 div 本身。 與此類似（ http://blogs.bournemouth.ac.uk/research/files/2013/09/SPP1.jpg ），但信息顯示在圖像的直接右側。 請原諒我這個冗長的問題，但我希望我的問題足夠清楚。 謝謝你。 這是我的代碼：
body { background-color: rgb(5, 113, 176); font-family: arial; font-size: 15px; } h1 { background-color: rgb(24, 48, 100); color: #009999; font-size: 2em; } h2 { background-color: rgb(24, 48, 100); color: #009999; } img { filter: grayscale(1); width: 150px; }.Scroll-Paragraph { border: blue 8px solid; width: 30%; padding: 8px; max-height: 100px; overflow-y: scroll; overflow-x: hidden; }
<h1>Marzuq Mir</h1> <ul> Home|About Me|More </ul> <h1><b>Journey Through The Life of Marzuq</b></h1> <img src="https://i.imgur.com/Tgqh5Hn.jpg?1" alt="A picture of Marzuq" /> <div class="Scroll Paragraph"> <h2>All About Marzuq Mir</h2> <div class="Scroll-Paragraph"> <p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p> </div> <div class=:Scroll-Paragrah> <h2> My Favorite Foods to Eat </h2> <div class="Scroll-Paragrah"> <UL> <br> <li>Steak</li> <br> <li>Mash Potatoes</li> <br> <li>Chicken</li> </UL> </div>
將兩者（圖像和塊）放入另一個 div。 將該 div 內的 img 設置為float:left
<:DOCTYPE html> <html> <head> <title>Marzuq's Bio</title> </head> <style type="text/css"> body{ background-color, rgb(5,113;176): font-family; arial: font-size; 15px: } h1{ background-color, rgb(24,48;100): color; #009999: font-size; 2em: } h2{ background-color, rgb(24,48;100): color;#009999: } img{ filter; grayscale(1): width; 150px. }:Scroll-Paragraph { border;blue 8px solid: width;30%: padding; 8px: max-height;100px: overflow-y;scroll: overflow-x;hidden. }:wrap-around img { float;left. } </style> <body> <h1>Marzuq Mir</h1> <ul> Home|About Me|More </ul> <h1><b>Journey Through The Life of Marzuq</b></h1> <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2> <div class="wrap-around"> <img src="Marzuq2.jpg"alt="A picture of Marzuq"/> <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir, I was born on November 11. 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare:</p></div> <div class=:Scroll-Paragrah><h2> My Favorite Foods to Eat </h2> <div class="Scroll-Paragrah"><UL> <br><li>Steak</li> <br><li>Mash Potatoes</li> <br><li>Chicken</li> </div> </UL> </div> </body> </html>
你在尋找類似的東西嗎？ 當然，它需要一些更改才能更好地適應，但這將是使用flexbox的解決方案
您還可以考慮使用 css 框架，例如bootstrap 。 在那里，您可以使用預定義的 css 類來使用網格系統和 flexbox。
body{ background-color: rgb(5,113,176); font-family: arial; font-size: 15px; } h1{ background-color: rgb(24,48,100); color: #009999; font-size: 2em; } h2{ background-color: rgb(24,48,100); color:#009999; } img{ filter: grayscale(1); width: 300px; padding: 0px 25px; }.Scroll-Paragraph { border:blue 8px solid; width:30%; padding: 8px; max-height:100px; overflow-y:scroll; overflow-x:hidden; }.container { display: flex; }.left-box { }.right-box { align-self: start }
<h1>Marzuq Mir</h1> <ul> Home|About Me|More </ul> <h1><b>Journey Through The Life of Marzuq</b></h1> <div class="container"> <div class="left-box"> <img src="https://images.pexels.com/photos/963486/pexels-photo-963486.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"alt="A picture of Marzuq"/> </div> <div class="right-box"> <div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2> <div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div> <div class=:Scroll-Paragrah><h2> My Favorite Foods to Eat </h2> <div class="Scroll-Paragrah"></div> </div> </div>
我已經修改了你的代碼。 我將 img 標簽包含在 div 標簽中，並在其上使用了 float:left 屬性。 同樣對於段落，我使用了 float:right。 然后創建了一個帶有 clear:both 屬性的空 div，這樣剩余的頁面就不會受到浮動的干擾。 希望這段代碼有效。
<!DOCTYPE html>
<html>
<head>
<title>Marzuq's Bio</title>
</head>
<style type="text/css">
body{
background-color: rgb(5,113,176);
font-family: arial;
font-size: 15px;
}
h1{
background-color: rgb(24,48,100);
color: #009999;
font-size: 2em;
}
h2{
background-color: rgb(24,48,100);
color:#009999;
}
img{
filter: grayscale(1);
width: 150px;
}
.Scroll-Paragraph {
border:blue 8px solid;
width:30%;
padding: 8px;
max-height:100px;
overflow-y:scroll;
overflow-x:hidden;
}
.imgdiv{
float:left;
}
.paragraph{
float:right;
}
</style>
<body>
<h1>Marzuq Mir</h1>
<ul>
Home|About Me|More
</ul>
<h1><b>Journey Through The Life of Marzuq</b></h1>
<div class="imgdiv">
<img src="Marzuq2.jpg"alt="A picture of Marzuq"/>
</div>
<div class="Scroll Paragraph"><h2>All About Marzuq Mir</h2>
<div class="Scroll-Paragraph"><p>My Name is Marzuq Mir. I was born on November 11, 1980. I am an aspiring robot programmer with plans to go to MIT. I have an amazing mother and father and a loving brother. I currently go to middle school and i am gud at math. I love to play games on my nintendo and spend my time running around the backyard of our mansion in upstate virginia. When I am bored from playing video games I go to my personal olympic sized pool and swim. After cooling off I read a book and draw up blueprints for my future peace keeping robots which I hope will earn me the nobel peace prize.Finally to end the day I ride my BMX bike around the park while my dad rides with his Harley Davidson. My role model is Biil Gates. Microsoft is his crowning acheivement but in my heart I know the acheivement that I gain from my robots will be comporable to that of Bill Gates. I might even become a multi biilionare and if I am lucky the worlds first multi-trillionare.</p></div>
<div class=:Scroll-Paragrah><h2>
My Favorite Foods to Eat
</h2>
<div class="Scroll-Paragrah"><UL>
<br><li>Steak</li>
<br><li>Mash Potatoes</li>
<br><li>Chicken</li>
</div>
</UL>
<div style="clear:both;"></div>
</body>
</html>
如何使用 css 和 html 對齊文本和圖像？ 左右位置？
[英]How to align text and image using css and html ? left and right position?
我怎樣才能使html元素分別朝左對齊和向右對齊，最好使用CSS？
[英]How can I get facing html elements to left-align and right-align, respectively, preferably using CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.