在我被投票或标记类似问题之前，我在堆栈上进行了搜索，但需要澄清，因为我是网络设计的初学者，在完全理解行话方面存在一些问题。作为背景，我正在创建一个个人资料页面，用户的图片在屏幕的左边，图片的右边应该是包含滚动条的信息部分。我使用了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的解决方案
您也可以考虑使用类似bootstrap的css框架。在那里，您可以通过使用预定义的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:beach属性的空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>