将块元素排列在一条水平线上

2023-12-13

我不知道,要么我不太擅长“搜索”艺术,要么这个话题太简单了,通常没有人问这个问题,但自从我开始我的网站以来,我一直在搜索这个问题。 我的网页上只有四个块元素。

  • 第一个 Block 元素单独显示在顶部
  • 第二个、第三个和第四个块元素,我想从下一行排列在单个水平行中
  • 目前我正在使用表格来做到这一点,但它的样式很糟糕,不是吗?
  • 请告诉我一种方法,可以将所有这 3 个块元素放在同一行中

目前,如果我删除表属性,我的块元素将移动到下一行。 如果我删除表属性,它会是这样的:

^^^^^^^^^^块元素:顶部^^^^^^^^^^^^

^^^^块2^^^^^

^^^^块3^^^^^

^^^^块4^^^^^

我希望块元素 2,3,4 位于同一行,如下所示: ^^^^区块 2^^^^^ ^^^^区块 3^^^^^ ^^^^区块 4^^^^^


您可以尝试显示:inline-block or float:left.

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      float: left;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

这些是对Chrome的影响。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将块元素排列在一条水平线上 的相关文章

  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • PHP 共享标头而不使用服务器端脚本?

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有
  • 在webview android中加载本地html文件

    我正在尝试在 android 的 webview 中加载 html 文件的内容 但是 它给了我 网页不可用错误 如果我尝试使用谷歌或雅虎等网站 它们就会起作用 html文件位于src gt main gt assests gt index
  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are
  • 如何在文本区域中使用除“文本插入符号”之外的透明字体?

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
  • 使用 jQuery 清除 IMG

    我正在尝试从 a 中删除加载的图像 img 元素 但清除或删除 src 不会执行此操作 该怎么办 HTML img src https www google com images srpr logo3w png JQUERY img att
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react

随机推荐

  • C++ 移位运算符优先级怪异

    考虑以下代码 typedef vector
  • 需要在unix中创建一个shell脚本或一个命令来执行以下过程(命令将是首选)

    在以下路径 ncsusnasent02 na jnj com its diq na win dev PowerCenter infa shared WCPIT BIO EDW SrcFiles DDDMD DDD CLI026 WK0933
  • 在 appcompat 22.2 中 Edittext 颜色为白色

    EDIT 2 发生这种情况是因为线路
  • 终端模拟器中的 Emacs 键绑定发生变化

    我注意到终端模拟器中的一些 Emacs 键绑定发生了变化 xfce4 terminal For example M SPC under TTY sets the mark but in xfce4 terminal it does noth
  • 是否可以通过 PHP 访问查询字符串中的锚点?

    我有一个通过如下 URL 访问的页面 http power coder net Test something php id 3 Page1 我知道如何使用 GET 访问 id 参数 但是有没有办法让我访问 Page1 部分 我查看了 SER
  • 向上滚动内容时如何隐藏工具栏?

    当我滚动文本和图像内容时 我试图隐藏工具栏 这里我使用scrollView来获取滚动内容 当我向上滚动内容时 如何隐藏工具栏 这是我的 XML 代码 内容 main XML
  • 在 Go 中解组 json:必填字段?

    如果使用 Go 解析 JSON 输入时未找到字段 是否可能会生成错误 我在文档中找不到它 是否有任何标签指定所需字段 中没有标签encoding json将字段设置为 必需 的包 你要么必须自己写MarshalJSON 方法 或者对丢失的字
  • for 循环中的多个“subplot2grid”

    我试图绘制两组不同的函数 通过双循环一次 我不知道如何要求 subplot2grid 对第二个图执行操作 import numpy as np from matplotlib import pyplot as plt t np linspa
  • 检索 XSLT 中的页面 URL 参数或页面 URL

    我有一个具有 URL 结构的页面 可以创建一个通用方法来获取 URL 可能的任何其他参数的值 parama 1 paramb 2 是否可以像 javascript 的 location href 一样获取 XSL 中页面的 URL 是否可以
  • 来自广泛 data.frames 的汇总数据表

    我正在尝试寻找创建汇总表 的惰性 简单方法data frames从宽处data frames 假设有以下 data frame 但有更多列 因此指定列名称需要很长时间 set seed 2 x lt data frame Rep rep 1
  • Console.WriteLine 慢

    我运行了数百万条记录 有时我必须使用Console WriteLine看看发生了什么 然而 Console WriteLine非常慢 比写入文件慢得多 但这非常方便 有谁知道加快速度的方法吗 如果只是为了调试目的 你应该使用Debug Wr
  • openjdk-8-jdk - 缺少 src.zip?

    以下是所需信息 apt list grep installed grep i openjdk 8 jdk WARNING apt does not have a stable CLI interface Use with caution i
  • Google 地图折线:标记包含单击的 LatLng 的两条折线坐标

    我在谷歌地图的折线中遇到问题 我有一条从一点到另一点的折线 当我单击折线时 我需要两端的纬度和经度 请问有人可以帮助我吗
  • 分数的2的补码表示法?

    我对此有点迷失 我需要使用两个小数位0 a 1 a 2 像这样 现在我可以使用 00 01 10 and 11但我也需要负数 2的补码 所以会 10 be 5 或者会是 25 与 11 那就是 75 或者会是 5 我很确定这两种情况都是前者
  • HTML5 Server 发送事件和多个客户端(不使用 Comet)

    我有一个用例 我想知道 HTML5 的 Server sent Events 是否适合 多个客户端 Javascript HTML5 浏览器 连接到 Web 服务器 具有 Java EE 后端 每个客户都可以随时查看不同的视图 具体取决于他
  • 如何接受/忽略QKeyEvent

    http qt project org doc qt 5 qwidget html keyPressEvent 请注意 QKeyEvent 以 isAccepted true 开头 因此您不需要 需要调用 QKeyEvent accept
  • 禁用 jQuery 自动完成下拉列表

    这是一个相当简单的问题 但如何禁用 jQuery 自动完成的下拉菜单 当用户开始输入时 我在响应回调上运行我自己的函数 我不需要任何其他东西出现 这就是我所拥有的 search autocomplete source app friends
  • 如何在C++中输出unicode方框图?

    抱歉 这听起来很简单 但我正在尝试使用来自的 unicode 字符在 Visual Studio 2017 中绘制一个简单的框https en wikipedia org wiki Box drawing character使用下面的代码
  • 这段代码是否安全,不会受到 SQL 注入的影响

    我想让我的代码尽可能安全 免受任何类型的攻击 我希望对下面使用的简单代码有一些了解 如果有任何关于如何使其更安全 如果它很脆弱 以及为什么会变得更安全的指示 那就太棒了 我读到 使用准备好的语句是防范攻击的最佳实践
  • 将块元素排列在一条水平线上

    我不知道 要么我不太擅长 搜索 艺术 要么这个话题太简单了 通常没有人问这个问题 但自从我开始我的网站以来 我一直在搜索这个问题 我的网页上只有四个块元素 第一个 Block 元素单独显示在顶部 第二个 第三个和第四个块元素 我想从下一行排