gpt4 book ai didi

css - HTML5 CSS : Rows and Resizing

转载 作者:太空宇宙 更新时间:2023-11-04 15:52:03 24 4
gpt4 key购买 nike

下面的代码是响应式的,可以调整大小等。但我正在寻找一些真正简单的 CSS 来在桌面和移动设备上调整大小。

我知道我可以使用标题链接 w3.css 中的 CSS,但必须有更好的方法才能在桌面和移动设备上轻松显示一些内容。

移动设备默认显示内联,但在桌面上显示为 3 行。

有没有比 w3 学校更简单的解决方案?

只是尝试做几行,然后在移动设备上调整为单行...

链接 rel 在标题中:

       <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">

<div class="w3-third w3-container w3-green" align=center>
<h2>w3-third</h2>
Stuff here too
</div>

<div class="w3-third w3-container w3-red">
<h2>w3-third</h2>
</div>

<div class="w3-third w3-container w3-blue">
<h2>w3-third</h2>
</div>

</div>

在 Ahmed 和 Raven 的帮助下,我来到了这里。但不居中。我还更改为 90% 以留出一些间距。

大部分情况下都有效,但不能以较大的宽度为中心。当宽度较小时会翻转到单行,这很好。我正在寻找这样的移动响应。简单的代码到目前为止,我可以轻松地操作。

CSS

       @media only screen and (min-width:320px) and (max-width: 600px) {

.display {
width: 90%;
background: #f1f1f1;
padding: 10px;
border: solid 2px #998E67;
margin: 5px;
}
}

@media only screen and (min-width:600px) {
.display {
float: left;
width: 30%;
background: #f1f1f1;
padding: 10px;
border: solid 2px #998E67;
margin: 5px;
}
}

不确定我是否需要这个外部 div 对齐中心,似乎不起作用。

          <div align=center style="border: 1px solid ##000">

<div class="display" align=center>
<img src="../../images/img.png" height="55" border="0">
<h2>This is first</h2>
</div>

<div class="display"">
<h2>This is second</h2>
</div>

<div class="display">
<h2>This is Third</h2>
<img src="../../images/image" height="55" border="0">
</div>

</div>

最佳答案

您可以使用媒体查询。然后你可以处理每个像素的样式

@media only screen and (min-width: 320px) and (max-width: 575px) {
//Use your styling here
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
//Use your styling here
}

关于css - HTML5 CSS : Rows and Resizing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49420215/

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