css-float - 使用 CSS 显示 :inline-block or float:left with mixed amounts of text-6ren

css-float - 使用 CSS 显示 :inline-block or float:left with mixed amounts of text

转载作者：太空宇宙更新时间：2023-11-04 15:31:06

25

4

在这里寻找一些关于如何最好地设置以下 HTML 样式的专家建议:

<body>
-Some content-
<div class="parent" style="height:50%;">
<div class="child" style="background-color:#FF9999;">An image</div>
<div class="child" style="background-color:#9999FF;">Some text</div>
</div>
</body>

要获得这样的结果:

enter image description here

我正在使用的标准如下:

容器 div，.parent，是一个 block 元素，填充浏览器窗口的整个宽度。
我知道第一个/左侧内部 div 的宽度，以像素为单位，但不是百分比，具体取决于将到达那里的图像的规律性。
我不知道第二个/右侧内部 div 的宽度 - 因为它包含可变数量的文本，应该自动填充右侧的整个空间，无论浏览器窗口宽度如何
第一个/左边的 div 的高度，当比第二个/右边的 div 短时，应该拉伸(stretch)到相同的高度(原因是:第一个/左边的 div 将有一个右边框将其与第二个分开/right div，此边框应为 .parent div 的高度；但是，第一个/左侧 div 并不总是出现在标记中，在这种情况下不应出现边框)。
我不会使用 JavaScript 技巧。

根据我的经验和网络资源的帮助，我尝试过的解决方案:

float :使用 float:left 的传统方法显然无法将第一个/左侧 div 拉伸(stretch)到其兄弟或 .parent 的(可变)高度。
行内 block :.parent {背景颜色:#999999;}.parent > .child {display:inline-block;vertical-align:top;height:100%;}

当第二个/右边的 div 中的文本不足以填满整行时，使用 display:inline-block 似乎很有用。然而，当有更多文本时，第二个/右边的 div 会增长到外部容器允许的宽度，迫使它包裹在第一个/右边的 div 下。

如有任何见解，我们将不胜感激!

最佳答案

使用基于表格的标记不是答案。但是，如果您不需要支持 IE7 或更低版本，则可以使用 display:table 来解决这个问题。看看我放在一起的这个演示。编辑第二个子div中的内容量，看看效果。

jsfiddle demonstrating display:table

.parent {
  display:table;
}

.child {
  display:table-cell;
}

基本上，您告诉 parent 元素充当表格，两个 child 元素充当表格单元格。这为您提供了表格布局的好处，而没有可访问性问题和 html 表格的额外标记。不过正如我所提到的，这在 IE7 中不起作用。如果你需要旧的 IE 支持，你将不得不求助于不太优雅的解决方法:(

关于css-float - 使用 CSS 显示 :inline-block or float:left with mixed amounts of text，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13372184/

25

4

0

文章推荐： javascript - 切换页面时继续播放音频

文章推荐： javascript - 在 Javascript 中按函数优化分组

文章推荐： css - css 选择器链中的 html 5 元素

Laravel mix 在 mix v4+ 中总是未定义
任何调用 npm run升级到 Mix v4.x 后导致 mix 未定义。我在每次运行时都会看到这样的错误: > npm run development > @ development /projec
laravel-mix - 升级到 Laravel MIX 6 后传入环境变量
升级到 Laravel-Mix 6 之前: Laravel-Mix 版本:5.0.9(支持 Webpack 4) NPM 版本:6.14.5 通过这个 laravel 混合版本，我能够通过运行 pac
Laravel 混合 : using `mix.js` or `mix.scripts`
在 Laravel 5.5 中，我使用 laravel-mix 来编译我的 Assets 。但是我不清楚:mix.js 之间有什么区别？和 mix.scripts为什么我要使用一个而不是另一个？最
javascript - mix.scripts 不工作(webpack.mix.js)
我有以下 webpack.mix.js: const { mix } = require('laravel-mix'); mix.scripts([ 'resources/assets/js/
elixir - `mix ecto.rollback` 和 `mix ecto.migrate` 命令的调试级别日志记录
目前，我正在寻找在运行 mix 任务时添加 SQL 语句日志记录的方法。例如，mix ecto.rollback 和 mix ecto.migrate 等命令输出信息: ... 13:45:53.01
elixir - 为 Mix 任务启动 Ecto(Mix.EctoSQL.ensure_started 不再工作)
我知道这个问题已经被问过了，答案总是单独的答案。但是我看到 Mix.EctoSQL.ensure_started 提到了很多，这似乎是公认的方法。然而，在 ecto_sql 3.1.2 中，此功能
elixir - mix.compile 返回错误 (Mix) 无法编译 "src/gettext_po_parser.yrl"因为找不到应用程序 "parsetools"
mix compile ==> gettext could not compile dependency :gettext, "mix compile" failed. You can recompi
javascript - 使用 webpack.mix 编译 js 文件时，mix.scripts 在 laravel 5.5 上不起作用
我正在使用 Laravel 5.5 ，在 webpack.mix 文件中，mix.styles 函数完美运行，我完美地编译了我的 css 文件，但是mix.scripts 不编译我在文档中找到的 js
mix - 如何设置默认的Elixir混合任务
如果我有一个mix.exs文件，例如: defmodule Mix.Tasks.My_task do use Mix.Task @shortdoc "Perform my task" de
Laravel Mix 不组合样式
这是我第一次使用 Laravel Mix、NodeJS 和 NPM。我试图遵循 Laravel 的文档并相信我做得对，但谁知道呢。我正在尝试将多个 CSS 文件合并为一个。 webpack.mix.
mixed-models - 每个物种使用多个条目的系统发育模型
我对系统发育回归模型比较陌生。过去，当我的树中每个物种只有 1 个条目时，我使用了 PGLS。现在我有一个包含总共 9 个物种的数千条记录的数据集，我想运行一个系统发育模型。我阅读了最常见软件包(例如
Laravel Mix - 是否需要链接以确保执行顺序？
TLDR；您是否必须链接 Laravel Mix 方法来维护执行顺序？是否有任何异步方法会阻止使用以下非链接模式，mix.scripts(); mix.js(); mix.sass(); ? 我运行
CSS @supports : mixing "not" with "and" or "or"
我想为支持“显示:网格”但不支持 IE/MS Edge 的浏览器提供特定部分的 CSS。你如何混合正面和负面的@support 查询？你能写“and not”还是有类似的符号？不幸的是，以下方法不起
Laravel mix 生成相对路径
在生产中，加载我使用的 Assets ，例如: 并期望在编译时看到: 但是我只是看到相对路径: webpack.mix.js: mix .js('resources/assets/js/ap
assembly - MIX 中的除法是如何进行的？
有人可以向我解释一下 MIX 中的除法(来自 Knuth 的 TAOCP)是如何在字节到字节的基础上工作的吗？ rA = |-| . . . .0| rX = |+|1235|0|3|1| 内存位置
Laravel-Mix 字体路径问题
我正在尝试使用我从 themeforest 与 Laravel 购买的主题我已经使用 mix.copy 将我的字体从 node_modules 移动到我的 public 目录，这工作正常。/ 但是，
elixir - mix 在代理后面不起作用
至少就在两周前，我一直在代理后面使用mix。但是我昨天发现 mix 无法在代理后面工作。混合版本是1.1.1。mix local.hex 运行。但是mix deps.get 出现错误。 $ mix d
c++ - 文件系统路径字符串方法返回 mixed\and/
我有一个 C++ 程序，我在其中使用递归迭代器遍历我作为参数提供给程序的文件夹。问题是，当我在路径上调用 .string 时，我在路径中混合了\和/。使用 .generic_string 修复了这个
javascript - Laravel Mix，如何在混合时传递变量？
所以我有一个 JS 文件，我想使用 Laravel mix 进行混合、复制和压缩；我的 webpack.mix.js 文件如下所示: const mix = require('laravel-mix'
elixir - 如何在伞形项目的根目录下创建 Mix 任务？
我有一个 Elixir 伞形项目。这个项目中的每个应用程序都可以使用 mix escript.build 编译成可执行文件。我正在尝试从伞项目的根目录运行此命令并收到以下错误 ** (Runtime

首页

博学

6Ren·AI

商城

css-float - 使用 CSS 显示 :inline-block or float:left with mixed amounts of text