CSS:3 个非典型包装的 div

coder 2023-08-12 原文

我正在尝试实现一些非典型的 div 行为，所以我不确定这是否可行。

我有三个水平相邻的 div:A、B 和 C(从左到右)。当浏览器调整大小时，或者如果用户的浏览器窗口太小，我希望 div B 低于 div A，而不是 div C 低于 div A 的典型行为。

此代码演示了典型行为:

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Title
    </title>
    <style type="text/css">
        .box {
            display: inline-block;
            margin: 4px;
            background: #ccc;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box" style="height: 200px;">div a</div>
    <div class="box" style="height: 300px;">div b</div>
    <div class="box" style="height: 500px;">div c</div>
</body>
</html>

http://jsfiddle.net/P5xLx/

当我将 div A 和 B 放在一个表格单元格中，将 div C 放在另一个表格单元格中时，我可以让 div B 低于 div A。唯一的问题是包含这两个 div 的左侧表格单元格确实不会折叠到两个 div 的宽度，因此 div A 和 B 与 div C 之间仍然存在间隙。此代码显示了该行为:

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Title
    </title>
    <style type="text/css">
        .box {
            display: inline-block;
            margin: 4px;
            background: #ccc;
            width: 200px;
        }
    </style>
</head>
<body>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">
                <div class="box" style="height: 200px;">div a</div>
                <div class="box" style="height: 300px;">div b</div>
            </div>
            <div style="display: table-cell;">
                <div class="box" style="height: 500px;">div c</div>
            </div>
        </div>
    </div>
</body>
</html>

http://jsfiddle.net/cncgs/

有没有办法让左边的表格单元格占据两个堆叠的 div 的宽度，或者也许有其他一些根本不涉及表格的方法来完成这个。基本上，我只需要找到一种方法，让 div C 在 B 低于 A 时坐在 A 和 B 旁边。我试图找到一个 css 解决方案并避免使用 javascript 解决方案，例如计算 A 的宽度和 B 并将其与左侧表格单元格的宽度进行比较。

编辑在上面的示例中，宽度为 200px，但在实际实现中，200px 是可变宽度，具体取决于用户提交的内容。我正在寻找可以处理可变宽度列的解决方案。

最佳答案

这件衣服怎么样？使用媒体查询更改前两个 div 的容器宽度:

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>

    <style type="text/css">
        .box {
            display: block;
            margin: 4px;
            background: #ccc;
            width: 200px;
            float:left;
        }
        .leftCol{width:416px; float:left}

        @media screen and (max-width: 1000px){
            .leftCol{width:208px;}
        }
    </style>
</head>

<body>
    <div class="leftCol">
        <div class="box" style="height: 200px;">div a</div>
        <div class="box" style="height: 300px;">div b</div>
    </div>
    <div class="box" style="height: 500px;">div c</div>
</body>
</html>

显然，宽度会根据您正在构建的内容而有所不同。

关于CSS:3 个非典型包装的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7034139/

典型包装 div gt lt css html css-float word-wrap

有关CSS:3 个非典型包装的 div的更多相关文章

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-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
ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2
只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？最佳答案有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您
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
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
ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
ruby-on-rails - Rails - 理解 application.js 和 application.css - 2
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:
css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2
我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30
css - rails 萨斯 : variables are not passed with @import - 2
我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen
css - Jekyll 和自定义 CSS - 2
有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

CSS:3 个非典型包装的 div

有关CSS:3 个非典型包装的 div的更多相关文章

随机推荐