草庐IT

html - CSS最小宽度和最大宽度以及灵活的布局

coder 2023-08-10 原文

我需要一些帮助来构建灵活的html布局。我已经定义了页面wrap的最小和最大宽度。在wrap内部，我有两列content和right。

我想要固定宽度的right列。但是，我想使content的宽度灵活，以便根据最小宽度和最大宽度来增加或减小其宽度。

这是我的html结构:

<body>
    <div class="wrap">
        <div class="content">...</div>
        <div class="right">...</div>
    </div>
</body>

这是CSS，我正在尝试:
.wrap{
    min-width: 780px;
    max-width: 1140px;
    margin: 10px auto;
}

.right{
    float:left
    width: 200px;   
}

.content{
    float: left;
    width: ?? //what should i do here?

}

最佳答案

在CSS中创建 float 列时，需要学习一些知识。

首先，也应清除容器(在您的情况下为.wrap)以进行浮点运算。这是有关“clearfix”的一个很好的Stackoverflow问题。 “Clearfixing”将确保容器的高度将拉伸(stretch)以匹配最长的 float 柱。对于执行“人造柱”设计很有用。

What methods of ‘clearfix’ can I use?

第二个，是否需要知道您要查找多少列？ 2列？ 3列？

有多种方法可以给猫咪贴皮。您可以创建2列，然后将其中一列再分割为另一2列布局。或者，您可以放置​​3个大块容器，然后将每个小容器 float 到总宽度的一定百分比。 IE。对于3列布局，理论上您希望每个宽度为33.33％(取决于您要如何处理装订线或边距)。

第三个，您谈论的是“灵活的布局”。好吧，灵活的布局无法使用像素宽度，因为像素是静态值。 IE。如果您说宽度为200像素，则无论您的容器或窗口的大小如何，宽度始终为200像素。

您需要做的是使用百分比。当然，要进行正确的灵活布局，您需要具有基本尺寸。因此，您确实需要固定一个设计，将其称为“最佳设计”(我必须宽松地使用该术语，因为真正的灵活和响应式设计在大多数情况下应该看起来不错)。

因此，可以说您的设计设置为将主要内容区域.wrap设置为1000px。您想要使用黄金比例的2列布局。 http://en.wikipedia.org/wiki/Golden_ratio

基本上，您希望一列为618px，另一列为1000px-618px = 382px。

然后，对于CSS，您想按百分比设置它们。要获取百分比，请采用父级宽度，然后将其除以所需的宽度。

618px/1000px = .618 * 100(百分比)= 61.8％

382px/1000px = .382 * 100(百分比)= 38.2％

.left {
    float: left;
    width: 61.8%
}

.right {
    float: right;
    width: 38.2%
}

约瑟夫·西尔伯(Joseph Silber)是正确的，您不需要 float 右边的列，但是这样做可能会导致其他意外问题，例如盒子模型如何作用并环绕 float 的左边元素，尤其是当一个元素短于另一个元素时。

您可以应用页边距将一列偏移到另一列宽度，但我发现这只是一团糟，浏览器中CSS实现不佳仍可能会出现问题(就我所说的那样，我不再支持IE6了，足以被我们的访问者使用以支持它)。

另请注意，在处理％时会遇到舍入错误。某些浏览器在达到“.5％”时会四舍五入。这可能会导致您的 float 列换行，因为它比容器元素大1px。因此，为了安全起见，您可能需要削掉一点宽度，以便为包装提供1-2px的缓冲区。

一种常见的方法是在左右列之间设置一个10像素的“空”装订线或边距。我们设计中的10px是:

10px/1000px = 0.01 * 100(百分比)= 1％

您现在可以将每列减免0.5％，也可以将一列减免1％。我待会儿再说。
.left {
    float: left;
    width: 60.8% /* removed 1% to give a gutter between columns */
}

.right {
    float: right;
    width: 38.2%
}

现在，这为您提供了一个不错的安全区域，并且您将避免舍入错误。

另外，既然我们以％进行工作，布局将是流畅的。您的2列将随浏览器调整大小，直到达到最小/最大像素值。

另外，别忘了“clearfix”
<div class="wrap clearfix">

    <div class="left">
        <!-- content -->
    </div>

    <div class="right">
        <!-- content -->
    </div>

</div>

当然，在处理流体/柔性网格时，还需要考虑许多其他因素。

您可以做的一件事不是重新创建轮子，而是使用Yahoo!这样的CSS框架。或蓝图。我相信它们具有内置功能，并且已经过严格测试。

另外，我建议您阅读响应式Web设计。上面有一篇“A List Apart”文章:http://www.alistapart.com/articles/responsive-web-design/以及由Ethan Marcotte撰写的一本书(该文章的另一部分并由ALA网站出版)，是一本好书。

该书唯一真正的缺点是它没有涵盖响应式设计的缺点，尽管有“酷”的因素，但许多知名的网页设计师/开发人员如何选择仍然使用单独的移动/桌面网站设计。

由于最初的问题只是在讨论流畅的设计，而不是媒体目标尺寸，因此这有点偏离主题。

希望对您有所帮助!

干杯!

关于html - CSS最小宽度和最大宽度以及灵活的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8805208/

htmlCSSbrcodefloat

有关html - CSS最小宽度和最大宽度以及灵活的布局的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  3. 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

  4. 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的路径中定义。这

  5. 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并在看到包时选择

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

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

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

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. 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

  10. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

随机推荐