【发布时间】：2021-09-10 06:26:59
【问题描述】：
我的 CSS 浮动属性对齐方式存在问题。在“关于我”部分，我希望 <p> elements 位于图像的右侧，但是，我的“投资组合”部分中的文本和信息也在图像周围浮动。如何格式化它，以便“关于我”部分中的文本是围绕图像的唯一文本，并且“作品集”横幅/标题位于其自己的行上并像块元素一样运作？
<html>
<head>
<title>About</title>
<style>
#aboutImage, #headerImage{
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
}
#about, #portfolio{
background-color: #ff80d5;
font-family: Gill Sans, sans-serif;
text-align: left;
vertical-align: center;
color: white;
font-weight: 100;
block-size: 50px;
display: flex;
align-items: center;
padding-left: 2%;
}
#portraits, #stationary{
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Gills Sans, sans-serif;
color: #ff80d5;
font-weight: 200;
}
p{
font-family: Gill Sans, sans-serif;
font-size: 18px;
color: #ff80d5;
border-style: dotted;
text-indent: 15px;
}
#menu, ul li{
text-align: center;
display: inline;
font-family: Gill Sans, sans-serif;
font-size: 22px;
padding: 3%;
}
a{
text-decoration: none;
color: #ff80d5;
}
#caption{
color: #ff80d5;
font-family: Gill Sans, sans-serif;
font-size: 22px;
text-align: center;
margin-top: 30%;
}
#portfolioImg{
width: 353px;
height: 447px;
margin-left: auto;
margin-right: auto;
}
#portraitGrid, #stationaryGrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
justify-content: center;
align-content: center;
grid-row-gap: 25px;
padding: 15px;
}
#aboutImage{
float: left;
}
#portfolioBlock{
display:block;
}
</style>
</head>
<body>
<img ID ="headerImage" src = "Images/Origami Mami Logo.jpeg">
<div ID = "menu">
<ul>
<li> <a href = "">Portfolio </a></li>
<li> <a href = "">Video</a></li>
<li><a href = "">Contact</a></li>
</ul>
</div>
<div ID="aboutMe">
<h1 ID = "about">About Me</h1>
<br>
<img ID = "aboutImage" class= "alignLeft" src = "Images/Ms. Mami.jpeg">
<p class="aboutText"> A Brooklyn native, Origami Mami (Kevin) has been folding for over 15 years. After a friend taught him how to fold an origami flower pot,
Origami Mami has been folding almost non-stop since. After a family member was diagnosed with Breast Cancer, and later another with AIDS,
he folded and gifted anything he made. The joyful and positive reactions from his sick loved ones gave him the greatest feeling, and which
led him to contiuosly fold.
</p>
<p>Originally teaching himself how to fold anything he found instructions to on the internet, he began adding greater color to his work by
making portraits and stationary cards. Now you can spread the same love and joy Origami Mami gave to his loved ones to yours. All portaits
and cards are created with careful attention to color, shapes, and patterns.
</p>
</div>
<div ID = "portfolioBlock">
<h1 ID = "portfolio">Portfolio</h1>
<p>Each piece of work is carefully thought out in regards to color, paint, origami design, and overall works. Some designs are simple, while
others a bit more abstract. The statement and takeaway message in each of these pieces is simply, love! With both portraits and stationary
each piece can easily be gifted, and portraits can be used as decor for home, and/or offices, which helps upkeep the spread of joy.
</p>
</div>
【问题讨论】：
-
元素，我的意思是P标签/段落。抱歉，如果我的措辞不正确或不准确，我是新手/自学，所以我还是会绕着行话头晕目眩