HTML5 CSS:行和调整大小

2023-12-31

下面的代码是响应式的,可以调整大小等。 但我正在寻找一些真正简单的 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> 

在艾哈迈德和雷文的帮助下我来到了下面。但不居中。我还更改为 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
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 CSS:行和调整大小 的相关文章

  • 在 R 中修改传单弹出窗口

    我想修改 R 中传单弹出窗口的外观 帮助文件指出 in the popupOptions 函数需要 传递给底层 Javascript 对象构造函数的额外选项 In 这个例子 https rstudio github io leaflet p
  • 将 Bootstrap CSS 中的列表居中[重复]

    这个问题在这里已经有答案了 重复报告后编辑 抱歉 我认为建议的重复项实际上可能是重复项 我先尝试了一下 但它对我不起作用 因此出现了一个新问题 再次查看新的建议答案后 我意识到我的问题可能与我正在使用的工具 codepen io 的开箱即用
  • 多行有多个提交按钮,我应该为每个按钮制作一个表单吗?

    我列出了大约 20 行 每行代表一个订单 每行需要有 3 个按钮 每个按钮单击将执行不同的操作 我有 3 个操作来处 理每个按钮发布请求 我只是不确定如何为每个按钮设置 Html 表单 tr td td tr
  • 如何将值发布到输入框中?

    Intro I would like to get the current time after clicking at click and POST the value into input text box Note 假设包含引导样式表
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • django:如何在模板html页面内进行计算?

    您好 我正在使用缩略图插件来获取图像的宽度和高度 现在我想使用从缩略图插件获取的高度来定义 img 标签的填充 例如 img style padding top img height 2 src 但是我在这里遇到错误 django不允许这样
  • Ionic 2:隐藏滚动条并继续滚动

    我只想hide滚动条 在需要滚动的页面中 我正在使用离子2 My 不工作解决方案 scroll content bar overflow hidden 此解决方案隐藏滚动条but使屏幕不可滚动 首先 改变浏览器的自然行为和预期的用户体验是一
  • 为什么我的 CSS 属性被覆盖/忽略?

    我对 CSS 层次结构 有一些问题 不确定将其称为层次结构是否正确 我正在尝试设置以下 HTML 的样式 section section
  • 悬停时从下到上填充按钮背景,从下到上填充文本颜色

    我需要创建按钮 并且在悬停时它不仅必须从下到上填充背景颜色 而且还必须从下到上更改文本颜色 我对这里的方法很满意 CSS 悬停时背景从下到上填充 https stackoverflow com questions 51562340 css
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • 如何让 jstree 节点显示长的、可能是多行的内容?

    当使用jsTree插件 http www jstree com 我需要有一个显示其完整内容的节点 目前 每个节点仅显示大约一行文本 如何让 jsTree 中的节点显示节点中的所有文本而不截断节点的内容 下面的 CSS 代码就可以解决这个问题
  • 检测 Webkit/Chrome 中 HTML5 数字控件更改的事件?

    HTML5 为我们提供了一些新的输入元素 例如
  • Bootstrap 响应式表格在 iOS 设备上无法垂直滚动

    这就是我所拥有的 div class table responsive table class table style background transparent table div 我正在使用以下 bootstrap css 文件 ht
  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so
  • Chrome 版 Firebug Lite 会破坏悬停效果和鼠标悬停事件

    我有一个奇怪的问题 使用时适用于 Chrome 的 Firebug Lite https chrome google com webstore detail firebug lite for google c bmagokdooijbeeh
  • 全高全宽 CSS 布局

    我正在寻找一种方法来创建具有 5 个区域的纯 CSS 无 JavaScript 布局 如下所示 H A B C F
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • 禁用复选框上的输入

    需要在取消选中该复选框时禁用输入 并在选中该复选框时启用它 我的代码是这样的 div class y div
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • 为什么我的 Web 组件 CSS 不显示?我没有使用shadowDOM

    我有一个没有使用 ShadowDOM 的 Native V1 组件 所以我将 CSS 放在 但是当其他人使用我的组件时 我的 CSS 就不再起作用了 仅当其组件确实使用 ShadowDOM 时才会发生这种情况 我的组件的示例代码 class

随机推荐

  • 如何解决“混合活动内容”highcharts 导出错误?

    由于 混合活动内容 错误 您似乎无法使用 https 导出 Blocked loading mixed active content http export highcharts com 您可以通过查看 Highmaps 演示之一来发现此问
  • 使用 YouTube API 将 YouTube 播放列表中的所有视频 ID 获取到 PHP 数组中

    我正在向我的网站添加自定义播放器 但有两个问题 我在 YouTube 上的播放列表有 391 首歌曲 而 API 播放器仅加载 200 首 我在使用 API 命令整理列表时遇到问题 这是我用来调用播放器的代码 div class video
  • LINQ 表达式帮助

    如何编写 LINQ 表达式 首选方法调用语法 来给出特定范围 例如 1 到 1000 内的斐波那契数列表 好的 更 FP 的答案 using System using System Collections Generic using Sys
  • Fabric.js - 无需按住鼠标按钮即可移动对象

    在 Fabric js 中 可以通过左键单击 按住并移动鼠标在画布中移动对象 在这种情况下 所选对象会跟随鼠标光标移动并object moving被解雇 释放鼠标左键可退出此模式 有没有办法改变这种行为并让对象通过不同的事件进入这种模式 例
  • Metro 捆绑程序:错误:EISDIR:对目录进行非法操作,读取

    当我重新加载我的包时 这个异常未被捕获 Error EISDIR illegal operation on a directory read at Object readSync fs js 592 3 at tryReadSync fs
  • 从 Runnable 返回值

    我花了几天时间试图解决这个问题 但我不能 解决这个问题的方法是去 StackOverflow D 碰巧我正在使用 libgdx 制作游戏的库 并且在 Android 中查询代码是通过Handler http developer androi
  • 带有自动完成材质 UI 的 React Form Hook

    我有一个countries数组包含id and name 目前我正在使用 Material UIAutocomplete元素和我有一个反应钩子形式 当我提交表单时 我想获取国家 地区 ID 目前它正在发布国家名称 有没有一种方法可以发布 i
  • 了解 Android:Zygote 和 DalvikVM

    我想了解 Android 如何启动应用程序 问题是 Zygote 如何 以及为什么 分叉一个新的 Dalvik VM 我不明白为什么不能在同一个 Dalvik VM 中运行多个应用程序 问 zygote 是如何精确分叉 Dalvik VM
  • AngularJS - 如何在不提交表单的情况下使用 ng-click?

    我有一个同时具有 ng click 和 ng submit 的表单 ng submit 用于提交 而 ng click 则调用单独的函数 例如上传等 如何确保 ng click 不会意外提交表单 谢谢你 ngClick does not提交
  • 如何更改 Eclipse IDE 的启动 JVM?

    我在 Mac 上运行 Eclipse Oxygen 1A 我可以在 安装详细信息 中看到 IDE 本身当前使用的 JVM 实际启动 JVM 是 Oracle 的1 8 0 131JVM 我安装了一些其他 JVM 包括最新版本1 8 0 16
  • 用于电子邮件检测的 Java RegEx

    有人可以告诉我为什么以下正则表达式没有拾取以下字符串 bob at gmail dot com 吗 a zA Z0 9 s at at s w s dot dt s w 1 3 改变这个 at at to at at and dot dt
  • 使用 matplotlib 检测图像中的鼠标事件

    所以我正在尝试编写一个程序来检测图像上的鼠标单击并保存 x y 位置 我一直在使用 matplotlib 并且它可以处理基本绘图 但是当我尝试对图像使用相同的代码时 出现以下错误 cid implot canvas mpl connect
  • 无法将“WITH XMLNAMESPACES...FOR XML PATH”的输出设置为变量?

    我有一个如下查询 WITH XMLNAMESPACES DEFAULT http www somewhere com SELECT SOMETHING FOR XML PATH RootNode TYPE 运行这个效果很好 但是 当我尝试将
  • gulp-ruby-sass 在 Windows 中不是一个可识别的命令

    我第一次在 Windows Server 2012 VM 上尝试 gulp 我通常是 Mac 用户 所以我对 Windows 和 Powershell 这样的开发工具有点陌生 我安装了 Node js 和 npm 没有其他任何东西 我创建了
  • 在 Windows 命令提示符中运行最后执行的命令

    当使用 UNIX 时 我习惯于输入 运行最后执行的命令 如何在 Windows 命令提示符下执行类似的操作 followed by Enter
  • Pyaudio、portaudio 和 mac 10.7.5

    我在正确安装 pyaudio 时遇到问题 我为该项目设置了一个 virtualenv 我首先尝试安装 portaudio sudo port install portaudio 返回 gt Cleaning portaudio gt Sca
  • OpenCV 构建中的可选库提供什么?

    我正在尝试从源代码 最新的 SVN 主干 构建 OpenCV 并且有几个 可选 依赖项 它们本身的下载量将达到数 GB 尤其是使用 Qt 框架时 例如 CUDA 幽灵脚本 MIKTEX PYTHON EIGEN IPP JASPER JPE
  • 在没有 OpenMP 的计算机上忽略它

    我有一个使用 OpenMP 的 C 程序 该程序将在可能安装或未安装 OpenMP 的多台计算机上运行 我怎样才能让我的程序知道机器是否没有 OpenMP 并忽略它们 include
  • 从堆栈跟踪行号获取实际的 jsp 行号?

    这是堆栈跟踪 org apache jsp showcustomer jsp jspService showcustomer jsp java 128 org apache jasper runtime HttpJspBase servic
  • HTML5 CSS:行和调整大小

    下面的代码是响应式的 可以调整大小等 但我正在寻找一些真正简单的 CSS 来在桌面和移动设备上调整大小 我知道我可以使用标题链接 w3 css 中的 CSS 但必须有一种更好的方法来轻松地在桌面和移动设备上显示某些内容 移动设备默认显示内联