草庐IT

css - 三列 DIV 布局动态；左 = 固定，中 = 流动，右 = 流动

coder 2023-08-01 原文

目前我找到的最佳解决方案是:

http://jsfiddle.net/kizu/UUzE9/

但事实并非如此。你看，我有三列；其中两个需要避免明确调整大小。好吧，第二个确实需要调整大小；但不完全是。

请允许我通过建立我一直试图满足的条件来澄清一下。

  • 所有三列的高度都是固定的:准确地说是 65 像素。
  • 第一列的宽度设置为 285 像素。
  • 中心列没有定义大小；它只会占用剩余的空间。
  • 右侧的列将根据其中的内容自行调整大小。没有明确设置大小，它只是根据内容调整大小，让中心列占据剩余的空间。
  • 每列的上方、下方和之间没有空格。

最终结果大概是这样的:

   Logo     |            Player          |    Name     
-----------------------------------------------------

For tables, I'd have simply done this:

<table width="100%" height="65px" cellspacing=0 cellpadding=0>
    <tr>
        <td width="285px" height="65px">
            Logo
        </td>
        <td height="65px">
            Player
        </td>
        <td width="1px" height="65px">
            Account
        </td>
    </tr>
</table>

上表代码结果:http://jsfiddle.net/zMNYb/

但我正试图摆脱使用表格和使用基于 DIV 的布局。有什么想法吗？

最佳答案

您可以通过对第一列使用 float:left，对最后一列使用 float:right 并将中间列设为 float:none

更新的演示:http://jsfiddle.net/L85rp/3/

HTML

<div class="col1">Column1</div>
<div class="col3">Column3</div>
<div class="col2">Column2</div>

CSS

.col1 {
    background-color: #ddf;
    float: left;
}
.col2 {
    background-color: #dfd;
    float: none;
}
.col3 {
    background-color: #fdd;
    float: right;
}

注意:有必要在 HTML 中将右栏放在中心栏之前(见上文，col3 在 HTML 中位于 col2 之前)以确保当浏览器呈现中心栏时，它知道如何在现有 float 元素周围正确呈现。

更新的 CSS

.col1 {
    background-color: #ddf;
    float: left;
    width: 285px;
    height: 65px;
}
.col2 {
    background-color: green;
    float: none;
    height: 65px;
    overflow: hidden;
    display: table-cell; /* turn this off to lock height at 65px */
}
.col3 {
    background-color: cyan;
    float: right;
    height: 65px;
}

更新演示:http://jsfiddle.net/ew65G/1/

关于css - 三列 DIV 布局动态；左 = 固定，中 = 流动，右 = 流动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11389588/

cssDIVcodestrongbackground-colorlayouthtml

有关css - 三列 DIV 布局动态；左 = 固定，中 = 流动，右 = 流动的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  3. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  4. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  5. ruby - 在 Ruby 中将整数格式化为固定长度的字符串 - 2

    有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案 如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的

  6. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  7. ruby - 在 Ruby 中动态创建数组 - 2

    有没有办法在Ruby中动态创建数组？例如，假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在，对于用户输入的每一本书，我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.

  8. ruby - 是否可以将 IRB 提示配置为动态更改？ - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  9. ruby-on-rails - carrierwave:在序列化动态属性上安装 uploader - 2

    首先，我使用的是rails3.1.3和来自master的carrierwavegithub仓库的分支。我使用after_init钩子(Hook)来确定基于属性的字段页面模型实例并为这些字段定义属性访问器将值存储在序列化哈希中(希望它清楚我是什么谈论)。这是我正在做的事情的精简版:classPage省略mount_uploader命令让我可以访问我想要的属性。但是当我安装uploader时出现错误消息说“nil类的未定义新方法”我在源代码中读到有方法read_uploader和扩展模块中的write_uploader。我如何必须覆盖这些来制作mount_uploader命令使用我的“虚拟

  10. ruby - 在 Ruby 中动态生成多维数组 - 2

    我正在尝试动态构建一个多维数组。我想要的基本上是这样的(为简单起见写出来):b=0test=[[]]test[b]这给了我错误:NoMethodError:undefinedmethod`test=[[],[],[]]而且它工作正常，但在我的实际使用中，我不会事先知道需要多少个数组。有一个更好的方法吗？谢谢 最佳答案 不需要像您正在使用的索引变量。只需将每个数组附加到您的test数组:irb>test=[]=>[]irb>test[["a","b","c"]]irb>test[["a","b","c"],["d","e","f"]]

随机推荐