gpt4 book ai didi

html - 仅在移动设备等小屏幕上进行测试对齐的问题

转载 作者:行者123 更新时间:2023-11-28 01:02:25 24 4
gpt4 key购买 nike

所以我有一个问题只发生在我以响应方式编写的网站的移动版本上。当我写一个句子时,它在大屏幕上看起来很棒,但在小屏幕上看起来却不像我想要的那样。示例:

1 应该是:(好)

Earn points for doing everyday things, like posting, sharing, 
liking or just being active!
Then jump to our rewards store & select an instant gift card.

2 当前:(差)

Earn points for doing everyday things, like posting, sharing,            

喜欢或只是活跃! 然后跳转到我们的奖励商店并选择即时礼品卡。

我怎样才能像示例 #1 中那样让句子彼此一致?我检查了一下,网站上的所有解决方案都不适合我。这是我的第一篇文章,如果不完整,我深表歉意。我会改进的!

尝试使用此代码无效。

@media all and (max-width: 360px){
.mleft20{
margin-left: 20px;
}
}

非工作图像 enter image description here

工作图像 enter image description here

使用的代码:

<br>
<h3><?php echo $this->translate('Be Rewarded!'); ?></h3>
<BR>
<head>
<style>
* {
box-sizing: border-box;
}

.row {
display: flex;
}

.column {
width: 33.33%;
padding: 5px;
max-width: 200px;
display: block;
margin: 15px auto;
}


/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */

@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<p>&nbsp &nbsp Earn points for doing everyday things, like posting, sharing,
liking or just being active!</p>
<p>&nbsp &nbsp Then jump to our rewards store & select an instant gift card.
</p>



<div class="row">
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow"
style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest"
style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains"
style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow"
style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest"
style="width:100%">
</div>
</div>

</body>
</html>
<br>
<h3><?php echo $this->translate('Get your invite!'); ?></h3>
<br>
<br>

最佳答案

* {
box-sizing: border-box;
}

p {
padding-left: 2rem;
}
<p>Earn points for doing everyday things, like posting, sharing, liking or just being active!</p>
<p>Then jump to our rewards store &amp; select an instant gift card.
</p>

关于html - 仅在移动设备等小屏幕上进行测试对齐的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52574607/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com