我一直在嘗試在盒子里的圖片旁邊寫一個文字，我一直在努力解決這個問題
想要的結果
CSS：
#roundedBox {
border-radius: 25px;
background: #363636;
width: auto;
height: auto;
margin: 10%;
display: flex;
position: relative;
}
#aboutUsImage {
max-height: 480px;
margin-right: 3%;
margin-left: 4%;
margin-top: 2%;
margin-bottom: 2%;
border-radius: 5%;
}
#aboutUsTitle {
font-size: 20px;
padding-top: 10%;
text-align: left;
}
#aboutUsText {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: 30%;
text-align: left;
}
#aboutUsText2 {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: 30%;
margin-top: 10px;
padding-top: 30px;
text-align: left;
}
Javascript：
<Grid id="roundedBox">
<Image id= "aboutUsImage" src={aboutUs} />
<Box>
<Heading id = "aboutUsTitle"> About us</Heading>
<Text id = "aboutUsText"> Founded in 2021, Coded Solution aims to create a secure underlying infrastructure platform for blockchain databases through consensus algorithms of the innovative supernode PoS consensus mechanism.</Text>
<Text id = "aboutUsText2"> This creates solutions for everything including smart contract, wallet, explorer, app, frontend and backend, which is unique in the current market.</Text>
</Box>
</Grid>
結果： 代碼右側的巨大空間
上面的結果是不需要的，因為標題及其段落旁邊有很多空間
uj5u.com熱心網友回復：
改變這個...
#aboutUsText {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: 30%;
text-align: left;
}
#aboutUsText2 {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: 30%;
margin-top: 10px;
padding-top: 30px;
text-align: left;
}
……到這個。
#aboutUsText {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: auto;
text-align: left;
}
#aboutUsText2 {
font-size: 14px;
font-weight: 300;
line-height: normal;
width: auto;
margin-top: 10px;
padding-top: 30px;
text-align: left;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/507813.html
標籤：javascript css 文本 下一个.js 主题-ui