如何对齐右边的文字和左边的图片？
如何对齐右边的文字和左边的图片？
提问于 2022-03-08 19:52:18
我把这个代码写下来了：
<!DOCTYPE html>
<html>
<head>
<title>UMass Boston Computer Science Club About page</title>
<link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='stylesheet'>
<style>
.logo-umb {
height: 100px;
width: 100px;
float: left;
}
.link {
padding-left: 30px;
padding-right: 30px;
padding-top: 80px;
padding-bottom: 30px;
border: none;
}
.link-home,
.link-about,
.link-events,
.link-guests,
.link-contact {
font-family: 'Chakra Petch';
color: #005A8B;
}
.about-title {
font-family: 'Chakra Petch';
color: white;
}
.about-cs-club {
background-color: #005A8B;
float: right;
}
.university-hall {
float: left;
}
.about-p {
font-family: 'Chakra Petch';
color: white;
float: right;
}
.abouttext {
float: right;
}
th,
td {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
.Address {
font-family: 'Chakra Petch';
color: #005A8B;
}
.links {
top: 100px;
}
</style>
</head>
<body>
<div class="Logo">
<img src="https://scontent-bos3-1.xx.fbcdn.net/v/t39.30808-6/275365687_1556735314708607_360968714522368993_n.jpg?stp=dst-jpg_s1080x2048&_nc_cat=108&ccb=1-5&_nc_sid=730e14&_nc_ohc=XIlEE10wTp8AX_QciOa&_nc_ht=scontent-bos3-1.xx&oh=00_AT-k3_5tH_E0qLKbssSfMKsHl9M7srtmIoECCQR1ZV5okQ&oe=622BBB6A"
class="logo-umb">
</div>
<div class="links">
<table>
<tr>
<td class="link"><a class="link-home">HOME</a></td>
<td class="link"><a class="link-about">ABOUT</a></td>
<td class="link"><a class="link-events">EVENTS</a></td>
<td class="link"><a class="link-guests">GUESTS</a></td>
<td class="link"><a class="link-contact">CONTACT US</a></td>
</tr>
</table>
</div>
<div class="about-cs-club">
<div class="university-hall">
<img src="https://hga.com/wp-content/uploads/2019/08/University-of-Massachusetts-Boston-%E2%80%93-University-Hall-interior-lobby-1.jpg" width="600" height="400">
</div>
<div class="abouttext">
<h1 class="about-title">What is the UMass Boston Computer Science club?</h1>
<p class="about-p">For motivated students who are interested in computer science and technology and attend UMass Boston, this student run computer science club is right for you. Taking place at the University Hall Room 4140 between 3:00-4:00 pm on Mondays, the computer
science club at UMass Boston is conveniently located in one of the newest and sexiest buildings at UMass Boston, and since anybody can attend the computer science club, when you attend the CS Club, you can learn everything, from web design to
app development to learning extra programming languages such as HTML, Java, JavaScript, Python, and Swift, and even, learning about operating systems and the history of computers as well. So everybody, come and join this CS Club. We plan events,
run competitions and competition training, share knowledge, and run excursions.</p>
</div>
</div>
<p class="Address">
University of Massachusetts Boston
<br> 100 Morrissey Blvd.
<br> Boston, MA 02125-3393
<br> 617.287.5000
</p>
</body>
</html>
但是它没有显示右边的文字和左边的图片。我需要帮助，试图调整它，使图片在左边，文本在右边。我很好奇，我怎样才能合并它，使段落在页面的右边，图像在左边？我试过所有可能的方法，但每一种方法都失败了。
回答 3
Stack Overflow用户
发布于 2022-03-09 05:23:43
您可以使用. .about cs-club{ display: flex;}和.about p{边距:1 1rem 1 1rem 0;} .abouttext h1{边距-左:1 1rem；}
.logo-umb {
height: 100px;
width: 100px;
float: left;
}
.link {
padding-left: 30px;
padding-right: 30px;
padding-top: 80px;
padding-bottom: 30px;
border: none;
}
.link-home, .link-about, .link-events, .link-guests, .link-contact {
font-family: 'Chakra Petch';
color: #005A8B;
}
.about-title {
font-family: 'Chakra Petch';
color: white;
}
.about-cs-club {
display: flex;
background-color: #005A8B;
float: right;
}
.university-hall {
float: left;
}
.about-p {
font-family: 'Chakra Petch';
color: white;
float: right;
margin: 0 1rem;
}
.abouttext {
float: right;
}
.abouttext h1{
margin-left: 1rem;
}
th, td {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
.Address {
font-family: 'Chakra Petch';
color: #005A8B;
}
.links {
top: 100px;
}<div class="Logo">
<img src="https://scontent-bos3-1.xx.fbcdn.net/v/t39.30808-6/275365687_1556735314708607_360968714522368993_n.jpg?stp=dst-jpg_s1080x2048&_nc_cat=108&ccb=1-5&_nc_sid=730e14&_nc_ohc=XIlEE10wTp8AX_QciOa&_nc_ht=scontent-bos3-1.xx&oh=00_AT-k3_5tH_E0qLKbssSfMKsHl9M7srtmIoECCQR1ZV5okQ&oe=622BBB6A" class="logo-umb">
</div>
<div class="links">
<table>
<tr>
<td class="link"><a class="link-home">HOME</a></td>
<td class="link"><a class="link-about">ABOUT</a></td>
<td class="link"><a class="link-events">EVENTS</a></td>
<td class="link"><a class="link-guests">GUESTS</a></td>
<td class="link"><a class="link-contact">CONTACT US</a></td>
</tr>
</table>
</div>
<div class ="about-cs-club">
<div class="university-hall">
<img src="https://hga.com/wp-content/uploads/2019/08/University-of-Massachusetts-Boston-%E2%80%93-University-Hall-interior-lobby-1.jpg" width="600" height="400">
</div>
<div class="abouttext"><h1 class="about-title">What is the UMass Boston Computer Science club?</h1>
<p class="about-p">For motivated students who are interested in computer science and technology and attend UMass Boston, this student run
computer science club is right for you. Taking place at the University Hall Room 4140 between 3:00-4:00 pm on Mondays, the computer science
club at UMass Boston is conveniently located in one of the newest and sexiest buildings at UMass Boston, and since anybody can attend the
computer science club, when you attend the CS Club, you can learn everything, from web design to app development to learning extra programming
languages such as HTML, Java, JavaScript, Python, and Swift, and even, learning about operating systems and the history of computers as well.
So everybody, come and join this CS Club. We plan events, run competitions and competition training, share knowledge, and run excursions.</p>
</div>
</div>
<p class="Address">
University of Massachusetts Boston
<br>
100 Morrissey Blvd.
<br>
Boston, MA 02125-3393
<br>
617.287.5000
</p>
Stack Overflow用户
发布于 2022-03-08 20:12:37
只需将display:flex添加到约-cs-俱乐部类即可。
Stack Overflow用户
发布于 2022-03-09 04:44:17
用flex就好了。但是，如果您仍然希望自定义代码，请尝试将其添加到宽度为50%的.abouttext类中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71400733
复制相关文章
相似问题
腾讯云开发者
