html - 拉伸(stretch) 4 列模板，中间有两个固定列和自定义 SOC。可能的？-6ren

html - 拉伸(stretch) 4 列模板，中间有两个固定列和自定义 SOC。可能的？

转载作者：行者123 更新时间：2023-11-28 14:55:08

25

4

html 代码源顺序应该是这样的:

<body>
    <div>col2</div>
    <div>col3</div>
    <div>col1</div>
    <div>col4</div>
</body>

应该是这样的:

<----------------------100%----------------------->
+--------+-------------------+-----------+--------+
|  col1  |       col2        |    col3   |  col4  |
|        |                   |           |        |
| (100%  |      (664px)      |  (312px)  | (100%  |
| -976px)|                   |           | -976px)|
| /2 px  |                   |           |  /2 px |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
|        |                   |           |        |
+--------+-------------------+-----------+--------+

它应该拉伸(stretch)到全宽。
col2 的宽度应固定为 664px，
col3 的宽度应固定为 312px，
col1 和 col4 应该具有相同的宽度并填满整个屏幕宽度。
这应该只使用 css 来完成。
所有主流浏览器都应该支持

我可以将 col2/col3 打包到另一个 div 容器中，并基本上处理 3 col 布局。但如果可能的话，我真的很想避免使用这个额外的容器。有可能吗？你好，乔

最佳答案

尽管使用表格而不是 div 进行布局并不是真正可行的方法，但在这种情况下，它可能是您唯一的选择。优点是表格的单元格会用完所有可用空间，并且您可以将特定宽度与相对宽度结合起来。您可以使用 div 完成相同的操作，但我认为如果不使用 JavaScript 进行一些计算是无法完成的。

这是一个简单的例子。中间的两个单元格具有固定宽度；外层细胞将占据剩下的部分。确保 table 足够宽。如果外部单元格中有内容，请考虑这些单元格的最小宽度并将其添加到表格的最小宽度。

HTML:

<table id="wrap">
    <tr>
        <td id="col1">col1</td>
        <td id="col2">col2</td>
        <td id="col3">col3</td>
        <td id="col4">col4</td>
    </tr>
</table>

CSS:

#wrap {
    min-width: 976px;
    width: 100%;
}
#wrap tr td {
    padding: 0;
    border-spacing: 0px;
}

#col1, #col4 {
  /* consider a min-width if there's content in these columns */
}
#col2 {
    width: 664px;
}
#col3 {
    width: 312px;
}

示例:http://jsfiddle.net/ukmBH/1/

关于html - 拉伸(stretch) 4 列模板，中间有两个固定列和自定义 SOC。可能的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3900430/

25

4

0

文章推荐： java - 从 Java Swing/图形导出到 HTML

文章推荐： javascript - If 语句 js 中有多个内容

文章推荐： css - 我怎样才能使这个 CSS Popup 工作？

c - FPGA模数转换DE1-SOC
我有一个运行 Linux 的 DE1-SOC(修订版 C)。我在访问板载 ADC 时遇到问题。所有 8 个 channel 的输入均为 3V Pk-Pk 正弦信号。板载 ADC 是 AD7928 12
mapping - 领域驱动设计、SOC 和实体识别
我一直试图围绕 DDD 以及它与 MVC 的关系进行思考，但我在实体识别方面遇到了麻烦。特别是，我试图在我的表示、域和数据模型之间保持严格的分离。我的问题是我如何跨这些边界保存实体识别。为了澄清起见
embedded - 芯片(SoC)中的各种复位
我想知道不同种类的复位以及芯片中的定义。最好冷，暖，系统，应用，开机复位。同样，对于它们每个的简单示例也受到高度赞赏。谢谢。最佳答案不知道您到底想了解什么。重置可以并且可以以多种不同的方式和方
linux - 片上系统 (SOC) 的设备驱动程序
我想在内核空间中从我的 android 手机读取 GPS 数据。我想为我的 GPS 编写一个设备驱动程序并通过它请求数据。但与外部设备不同，我找不到 GPS 硬件或安装它的 SOC 的供应商 ID 和
c - A20 SoC 上的数据中止
我正在尝试编写一个通过串行端口显示消息的小型应用程序。该二进制文件在没有操作系统的情况下执行，因此它是裸机。代码如下: #include #define FIFO 0x0 #define NOFI
python - soc.recv 到底返回什么？
这个问题已经有答案了: Python byte string print incorrectly in dictionary (1 个回答) 已关闭 6 年前。根据Python文档，Python的套
Linux，支持略有不同的电路板变体，相同的 SOC
我目前正在使用 freescale 的 i.MX6 和 linux 构建。我们的板子略有不同，我想找到一个很好的例子，或者可能是关于如何在 linux 内核中轻松支持板子的几个不同变体的想法。我想做
architecture - SoC 的首选 HDL 实例化层次结构
假设您正在实现一个带有 cpu、ram、rom 和 mmu 的简单 SoC，以将 ram 和 rom 映射到 cpu 的地址空间。在实例化不同的组件时，这样做会更有意义: ram 和 rom 在 mm
android - 我可以信任 soc.io 来发布我的应用程序吗
今天我发现了一个名为 soc.io 的新 Android 应用程序商店。网站看起来非常干净简洁，但是您永远不能相信一个漂亮的网站。所以我在 soc.io 上搜索了任何评论，但我一无所获。我阅读了整个开
linux - 用于运行 linux 的小型嵌入式系统的平衡处理器/SOC(？)
所以，我知道在考虑较小规模的嵌入式系统时，Linux 内核相当“沉重”，但目前我们是一个 2 人团队，试图了解如何创建我们自己的嵌入式系统。我是所有软件的负责人(另一个人是硬件人员)，因此我想尽可能多
android - 具有相同内核的 ARM SoC 之间有很大差异吗？
具有相同内核的两个 ARM SoC 之间(在性能方面)有很大差异吗？例如，在以下情况之间可能存在哪些差异(除了那些可归因于不同时钟速率的差异): Apple A5，基于 1GHz 双核 ARM Co
OpenCL 用于 SoC 原型(prototype)开发板上的定制系统
是否可以在用户在 SoC 原型(prototype)板上设计的系统上运行 OpenCL？更具体地说，我有一个具有双 ARM 内核和可编程逻辑 (PL) 区域的 ZedBoard (Xilinx Zyn
embedded - Soc(片上系统)和SBC(单板计算机)的区别
谁能解释一下 Soc 和 SBC 之间的主要区别？最佳答案 SOC = 片上系统 SBC = 单板计算机 SOC 在一 block 硅片上有多个功能单元。通常是多个处理器和外围设备。 SBC 是单个
c - 声音/soc/编解码器 i2c 驱动程序不会探测
我正在 sound/soc/codecs 中编写音频编解码器。它编译并调用 init 函数，但 probe() 函数不调用。我试过这个所以question建议，但没有成功。我还尝试切换到 sgtl5
c - 如何确定要使用哪个 SOC 或 SDK 板？
基本上，我正在研究自动真空吸尘器的模型。我目前已经制作了相同的软件模拟。如何确定用于硬件实现的 SOC 或 SDK 板？我的代码大部分是用C写的，这样能兼容板卡厂商提供的sdk吗？我怎么知道硬件需要什
linux - 无法从 Ubuntu SSH 进入有线 SoC
我需要从我的 Ubuntu 14.04 机器上通过 ssh 连接到 Red Pitaya。我正在使用 ssh 实用程序； ssh root@192.168.1.100 使用密码 root。这些参数和此
android - 如何检索 Android 设备的 SoC 型号名称？
如何检索 Android 设备的 SoC 型号名称？例如。 Qualcomm MSM 8974 HAMMERHEAD(扁平化设备树) 适用于 Nexus 5。(例如 CPU-Z 应用显示此信息。) 最
audio - 为 Cyclone V SoC (Linux) 创建简单的音频驱动程序
我正在使用 Altera Cyclone V SoC 为电路板设计软件(运行 Linux 的 ARM Cortex-A9 与 FPGA 耦合)。 Linux 操作系统运行良好，支持板载外围设备(以太网
mysql - MVC架构/SoC : Should Controller Initiate DB Transaction?
我有一个 Controller 处理表单输入，这些输入影响由各自模型处理的两个单独的数据库表。如果在这两个表中记录数据时出现问题，我希望请求失败并且不应插入/更新任何记录。让我的 Controlle
用于 TI CCXXXX SoC 芯片的 Linux 工具链
我正在尝试使用 TI CC2510 无线 SoC 芯片做一个项目，但我想使用 Linux 将我的 C 代码加载到设备上。我不想仅仅为了我的开发目的而购买 Windows。有谁知道这是否可以做到？如果是

首页

博学

6Ren·AI

商城

html - 拉伸(stretch) 4 列模板，中间有两个固定列和自定义 SOC。可能的？