Unfixed 响应式设计样式
Unfixed Responsive design styling
Updated!!!
每次在横向屏幕设备上查看页面时,我仍然遇到同样的错误。
CSS:
f5 {
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-weight: bold;
}
about.us
<div class="containerpreview">
<br>
<f5>Check out our products</f5>
<br>
<f6>and Experience no-frills delivery</f6>
<div style="margin-top:40px">
<div class="buttoneshop"><a href="...">Eshop</a></div>
</div>
</div>
有没有办法让两者之间的间距更近一些?当我命令
text-transform: uppercase;
间距没问题
除此之外,有没有办法让 href 下的 src 中的图像居中?
css
.images_1_of_4 img {
max-width: 100%;
<!-- height: 200px; -->
width: 200px;
align: middle;
}
.img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.grid_preview {
height: 200px;
}
shop.php
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<a href="..."><img src="..." alt=""></a>
</div>
</div>
尝试将对齐 text-align : justify;
更改为 text-align : left
。
或者,如果这不是您喜欢做的,letter-spacing is a CSS attibute to change space between charagcters, and word-spacing 在单词之间更改 space
正如其他用户所建议的那样,考虑使用 text-align : left
强制在左侧对齐,您可能在包装元素上有 text-align : justify;
或设置在 css 的另一部分,如图所示下面的例子。
https://jsfiddle.net/s5p9872t/
.f5 {
text-align : justify;
width: 250px;
}
.f5 {
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
text-align: left;
}
Updated!!!
每次在横向屏幕设备上查看页面时,我仍然遇到同样的错误。
CSS:
f5 {
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-weight: bold;
}
about.us
<div class="containerpreview">
<br>
<f5>Check out our products</f5>
<br>
<f6>and Experience no-frills delivery</f6>
<div style="margin-top:40px">
<div class="buttoneshop"><a href="...">Eshop</a></div>
</div>
</div>
有没有办法让两者之间的间距更近一些?当我命令
text-transform: uppercase;
间距没问题
除此之外,有没有办法让 href 下的 src 中的图像居中?
css
.images_1_of_4 img {
max-width: 100%;
<!-- height: 200px; -->
width: 200px;
align: middle;
}
.img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.grid_preview {
height: 200px;
}
shop.php
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<a href="..."><img src="..." alt=""></a>
</div>
</div>
尝试将对齐 text-align : justify;
更改为 text-align : left
。
或者,如果这不是您喜欢做的,letter-spacing is a CSS attibute to change space between charagcters, and word-spacing 在单词之间更改 space
正如其他用户所建议的那样,考虑使用 text-align : left
强制在左侧对齐,您可能在包装元素上有 text-align : justify;
或设置在 css 的另一部分,如图所示下面的例子。
https://jsfiddle.net/s5p9872t/
.f5 {
text-align : justify;
width: 250px;
}
.f5 {
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
text-align: left;
}