html - 用于在动态调整 2 个元素大小时对齐 3 个元素的纯 HTML/CSS 解决方案？

coder 2023-08-12 原文

这个问题需要解释一下。请耐心等待:

几个月前，我为网站上的一个部分设置了一个由三部分组成的标题。在此标题的左侧有一个标题，其内容可以更改。右侧是一个 Logo ，始终为 150 像素宽 x 60 像素高。它们之间是一组双线。像这样:

[这是标题] ======================================= [ Logo 这里]

这个网站是响应式的，所以标题的整体宽度是可变的。
标题必须始终位于一行中。包含双线的 div 需要更改大小以填充标题和 Logo 之间的空间。

我最初设置它以便使用媒体查询和 calc(); 调整行的大小；功能。然而，该网站必须一直兼容到 IE 8，所以我最终写了一些 JS 来让它工作。

这是一个 JS fiddle ，它基本上反射(reflect)了这种行为: http://jsfiddle.net/55u5mpu2/2/

function sizeLines() { 
var logoSize = document.getElementById("the-logo").offsetWidth; 
var titleWidth = document.getElementById("the-h2-Title").offsetWidth; 
var totalWidth = document.getElementById("entire-Header").offsetWidth; 
var offsetWidth = (logoSize + titleWidth); 
var linesWidth = (totalWidth - offsetWidth - 20) + "px"; 
document.querySelector("#the-lines").style.width = linesWidth;   }

window.onresize = sizeLines;

#entire-Header{
  position: relative;
  width: 100%;
  height:40px;
}

#the-h2-Title {
  position: relative;
  float: left;
  width: auto;
    padding-right: 10px;
}

#the-lines {
  border-top: 4px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  height: 1px;
  float: left;
  margin-top: 23px;
  min-width: 40px;
}

#the-logo {
  position: relative;
  max-width: 160px;
  max-height: 50px;
  float: right;
  width: auto;
  height: auto;
  top: 0;
}

<div id="entire-Header">
   <h2 id="the-h2-Title">
      <div id="headlineTextbox">This is a Test Headline</div>
   </h2>
   <div id="the-lines"> &nbsp;</div>
   <img id="the-logo" src="http://placehold.it/150x60">
</div>

问题是，脚本在慢速连接上需要很长时间才能加载，因此 Logo 会在一个奇怪的地方停留一段时间。因此，我试图找到一个纯 CSS/HTML 解决方案来完成与我的脚本相同的事情。

这里有相关问题，但似乎都不适用。我不能在标题或线条上设置宽度，因为它们都是动态的。

表格似乎工作正常，但如果我输入 width: auto;在两个 tds 上，事情失败了。

这是我创建的一个不错的表格布局示例: http://jsfiddle.net/d40a429s/1/

table {width: 100%;}
#test-title {width:20%;}
#lines-here {width:auto;}
#lines-here > div {border-top:4px solid #2a2a2a; border-bottom:4px solid #2a2a2a;height: 1px;}
#test-logo {width: 160px; padding-left: 10px;}

<div id="test-Section-Header">
   <table>
      <tbody>
         <tr>
             <td id="test-title"><h2>Test Title</h2></td>
            <td id="lines-here">
               <div></div>
            </td>
            <td id="test-logo">
               <img src="http://placehold.it/150x60" alt="150 x 60 placeholder logo image">
            </td>
         </tr>
      </tbody>
   </table>
</div>

我试过放置 position: absolute;以及 Logo 和标题上的顶部/左侧或顶部/右侧，但我无法正确调整中间 div 的大小。

所以:如果有人在这里成功了:关于如何在没有 JS 的情况下使它工作的任何想法？或者整理我的 JS 以使其运行得更快的方法？

谢谢!

最佳答案

您的问题可以通过稍微修改 HTML 和 CSS 完全解决，不需要 JavaScript。

这是 Danield 的 fork fiddle - 支持 IE8+

解释:

将 #the-logo 移动到 #entire-Header 容器中的第一个元素允许我们 float #the-logo 正确，没有它换行并放在标题下方，因为在计算布局时它具有“更高的优先级”。
将“clearfix”添加到#entire-Header 使我们不必担心标题溢出由任何固定维度分配的空间。这使我们可以完全删除 height 约束。 #entire-Header 是 block 级元素 (div)，这意味着默认情况下它的宽度为 100%，不需要显式设置(除非它有以前被覆盖)。
#the-h2-Title 是 #entire-Header 中的第二个元素，向左浮动。作为一个 block 元素 (h2)，它将在 #the-logo 下方作为一个整体进行包装，然后再将单词包装在自身内。
现在我们已经在两侧放置了 Logo 和标题，我们可以设置 #the-lines 的样式。作为 block 级元素，它将水平扩展到可用空间，在本例中为 100%。为了防止它延伸到标题和 Logo 下方，我们将 overflow: hidden 或 overflow: auto 添加到 #the-lines。这将创建一个新的 block formatting context这使得 #the-lines 的宽度缩小到两个 float 元素之间计算的剩余可用空间。

警告:只有当 #the-line 的高度小于 #the-logo 的高度时，这才会起作用，否则 #the-line 将在 #the-logo 下方换行。这是因为它是第三个元素，它的布局受前两个元素的影响。

CSS:

#entire-Header {
    margin: 1em 0 .5em;
}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
#entire-Header:before,
#entire-Header:after {
    content: " ";
    display: table;
}
#entire-Header:after {
    clear: both;
} 
#the-h2-Title {
    margin: .5em 0;
    float: left;
    margin-right: 10px;
}
#the-lines {
    border-top: 4px solid #000000 !important;
    border-bottom: 4px solid #000000 !important;
    height: 1px;
    /* http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ */
    overflow: hidden;
    margin-top: 23px;
}
#the-logo {
    width: 160px;
    height: 50px;
    margin-left: 10px;
    float: right;
}

标记:

<div id="entire-Header">
    <img id="the-logo" src="http://placehold.it/150x60" />
     <h2 id="the-h2-Title">
      <div id="headlineTextbox">This is a Test Headline</div>
   </h2>

    <div id="the-lines"></div>
</div>

关于html - 用于在动态调整 2 个元素大小时对齐 3 个元素的纯 HTML/CSS 解决方案？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29808009/

html code 34 section css alignment variable-width dynamic-sizing

有关html - 用于在动态调整 2 个元素大小时对齐 3 个元素的纯 HTML/CSS 解决方案？的更多相关文章

ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
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
ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby - inverse_of 是否适用于 has_many？ - 2
当我使用has_one时，它工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

html - 用于在动态调整 2 个元素大小时对齐 3 个元素的纯 HTML/CSS 解决方案？

有关html - 用于在动态调整 2 个元素大小时对齐 3 个元素的纯 HTML/CSS 解决方案？的更多相关文章

随机推荐