草庐IT

html - 删除 float : right on wrap

coder 2023-08-09 原文

有什么方法可以制作流畅的布局，如果 float 元素不适合，它会移动到下一行的左侧？这是我要实现的目标的图片:

如果绿色元素和右侧元素都有空间，则红色元素向右浮动。

如果没有足够的空间(绿色元素太长，或者屏幕太小)，红色元素应该环绕并向左对齐。

这是我目前拥有的:fiddle

如您所见，绿色元素在环绕后保持向右对齐。

代码:

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

.red {
    display: inline-block;
    border-color: red;
}
.green {
    float: right;
    width: 80px;
    border-color: green;
}

最佳答案

评论

我给出的这个答案不适用于花车。相反，我正在使用更现代的 CSS3 解决方案 ( so watch out with browser compatability )，使用 display:flex。 Flex 还为将来的编辑提供了更多简单的选项。它还将一行上所有 div 的高度调整为相同的高度，并且可能还有一些东西 ^^。

JSFiddle (resize the width in JSFiddle to see the effect)

HTML

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

CSS(阅读评论)

    div {
       border: 3px solid blue;
       padding: 5px;
    }
    .wrap {
        display: flex;/*create a flexbox (style it like a block item)*/
        display: -webkit-flex; /* Safari */
        flex-wrap: wrap;/*items in the flexbox will drop down when they do not fit this div*/
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
        justify-content: space-between;/*spaces content on a row keeping an item on the 
    right and one on the left and creating empty space inbetween unless the next item fits 
    in this space in which case the browser will do that (same effect as float: left, only 
    with a better transition)*/
        width: 50%;
        border: 3px solid blue;
        padding: 5px;
    }
    .red {
        border-color: red;
        flex: 0 1 180px;/*all you need to know here is that the 3th value is the width 
    of the item*/
        -webkit-flex: 0 1 180px; /* Safari 6.1+ */
        -ms-flex: 0 1 180px; /* IE 10 */

    }
    .green {
        border-color: green;
        flex: 0 1 100px;/*all you need to know here is that the 3th value is the width
    of the item*/
        -webkit-flex: 0 1 100px; /* Safari 6.1+ */
    -ms-flex: 0 1 100px; /* IE 10 */
}

关于html - 删除 float : right on wrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26815404/

floatrightstrongdivthehtmlcss

有关html - 删除 float : right on wrap的更多相关文章

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

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

  2. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  3. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  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 - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

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

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

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

  8. ruby - 如何安全地删除文件？ - 2

    在Ruby中是否有Gem或安全删除文件的方法？我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。 最佳答案 如果您使用的是*nix，一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?

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

  10. ruby-on-rails - 标准化文件名的字符串，删除重音和特殊字符 - 2

    我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称，名称字符串可以有重音符、空格和特殊字符。我想删除所有这些，用相应的字母('é'=>'e')替换重音符号，并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin

随机推荐