HTML CSS 画面のサイズに関係なくレイアウトを固定したい
解決したいこと
画面のサイズが変更されてもレイアウトが崩れずに、そのままの画面が大きくしたりり、小さくしたりしたいです
position:'relative'で固定しておりadlessとmoneyとimg以外は画面に対応して変化するのですが、この３つだけ変化しません。
発生している問題・エラー
エラーは特にありません、思うような挙動をしません
該当するソースコード
result: {
position: 'relative',
top: '100px',
border: 'solid 2px',
width: '70%',
marginLeft: 'auto',
marginRight: 'auto',
},
resultlist: {
backgroundColor: '#6495ED',
fontSize: '20px',
textAlign: 'left',
},
guest: {
position: 'relative',
fontSize: '20px',
top: '-110px',
left: '60px',
},
adless: {
position: 'relative',
top: '-90px',
left: '550px',
fontSize: '20px',
border: 'solid 1px',
},
money: {
position: 'relative',
left: '330px',
top: '50px',
fontSize: '20px',
border: 'solid 1px',
},
img: {
position: 'relative',
width: '200px',
height: '200px',
right:'440px',
marginTop:'30px'
return(
<div className={classes.result}>
<div className={classes.resultlist}>民宿一覧</div>
<List>
{guesthouseList.map(guesthouse =>
<ListItem key={guesthouse.guesthouseNumber} divider={true} className={classes.sen}>
<Link onClick={()=> history.push(`/Detail/${guesthouse.guesthouseNumber}`)}
className={classes.guest}>
{guesthouse.guesthouseName}
</Link>
<Typography className={classes.adless}>住所 {guesthouse.guesthouseAddress}</Typography>
<Typography className={classes.money}>料金 {guesthouse.price} 円</Typography>
<img className={classes.img} src={`data:image;base64,${guesthouse.image}`}
alt='写真'
>
</img>
</ListItem>
)}
</List>
</div>
</div>
)
自分で試したこと
adlessとmoneyの表示されている場所が画面の大きさを変えることでその大きさに合わせた、位置にレイアウトされず、常に固定の位置にあります。
position:relativeをabsoluteにしてみてもダメでした。何か良い方法ございましたら教えてください。
adlessとmoneyのCSSを何かしら変更すれば思い通りの挙動になると個人的には思っておりますが、全く思いつきません。
0 likes
