草庐IT

html - div 的高度 = 它的宽度，以百分比表示，因此 div 看起来像一个正方形，容器元素的形状不是正方形(仅限 CSS)

coder 2023-08-11 原文

我已将我的元素的宽度和高度设置为百分比，以便它们在大屏幕上看起来大一点，在普通屏幕上看起来正常。我还设置了 min-height 和 min-width 以便在太小的屏幕上查看时不会扭曲布局。我希望我的元素之一显示为正方形，但我无法想出一个纯 CSS 解决方案来实现它。

这是我尝试过的:http://jsfiddle.net/5VTTD/ ，但它没有用。

这有效:http://jsfiddle.net/5VTTD/1/ , 但它使用 JS。

最佳答案

您将需要一个外部 <div>作为容器，然后作为正方形的内部容器。

我为正方形使用了 50% 的尺寸，但您可以使用您想要的尺寸:它将相对于父级 <div>容器。

我还给它一个黑色背景颜色来突出它:这里有一个 DEMO .

诀窍都在 padding-bottom: 100% 中 parent 的<div> .

CSS:

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#square {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #000000;
}

HTML:

<div id="container">
  <div id="square">
  </div>
</div>

关于html - div 的高度 = 它的宽度，以百分比表示，因此 div 看起来像一个正方形，容器元素的形状不是正方形(仅限 CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12781536/

容器divcodesectionjsfiddlehtmlcss

有关html - div 的高度 = 它的宽度，以百分比表示，因此 div 看起来像一个正方形，容器元素的形状不是正方形(仅限 CSS)的更多相关文章

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

  2. Ruby - 如何将消息长度表示为 2 个二进制字节 - 2

    我正在使用Ruby，我正在与一个网络端点通信，该端点在发送消息本身之前需要格式化“header”。header中的第一个字段必须是消息长度，它被定义为网络字节顺序中的2二进制字节消息长度。比如我的消息长度是1024。如何将1024表示为二进制双字节？ 最佳答案 Ruby(以及Perl和Python等)中字节整理的标准工具是pack和unpack。ruby的packisinArray.您的长度应该是两个字节长，并且按网络字节顺序排列，这听起来像是n格式说明符的工作:n|Integer|16-bitunsigned,network(bi

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

  4. 映宇宙2022年营收63亿元：同比下降三成，毛利率提升4.3个百分点 - 2

    3月26日，映宇宙（HK:03700，即“映客”）发布截至2022年12月31日的2022年度业绩财务报告。财报显示，映宇宙2022年的总营收为63.19亿元，较2021年同期的91.76亿元下降31.1%。2022年，映宇宙的经营亏损为4698.7万元，2021年同期则为净利润4.57亿元；期内亏损（净亏损）为1.68亿元，2021年同期的净利润为4.33亿元；非国际财务报告准则经调整净利润为3.88亿元，2021年同期为4.82亿元，同比下降19.6%。 映宇宙在财报中表示，收入减少主要是由于行业竞争加剧，该集团对旗下产品采取更为谨慎的运营策略以应对市场变化。不过，映宇宙的毛利率则有所提升

  5. ruby - 如何在 Ruby 中返回整数的固定长度二进制表示？ - 2

    我知道我可以使用Fixnum#to_s将整数表示为二进制格式的字符串。但是1.to_s(2)生成1而我希望它生成00000001。我怎样才能使所有返回的字符串都以零作为填充到8个字符？我可以使用类似的东西:binary="#{'0'*(8-(1.to_s(2)).size)}#{1.to_s(2)}"if(1.to_s(2)).size但这看起来不是很优雅。 最佳答案 使用字符串格式。"%08b"%1#=>"00000001" 关于ruby-如何在Ruby中返回整数的固定长度二进制表示？

  6. Ruby:检查东亚宽度 (Unicode) - 2

    使用Ruby，我必须将字符串以柱状格式输出到终端。像这样:|row1|astringhere|etc|row2|anotherstring|etc我可以使用String#ljust和%s处理拉丁UTF8字符。但是当字符是韩文、中文等时就会出现问题。当英文行与包含韩文等的行交错时，列根本不会对齐。如何在此处实现列对齐？有没有办法以等同于固定宽度字体的方式输出亚洲字符？对于要在Vim中显示和编辑的文档怎么样？ 最佳答案 您的问题发生在CJK(中文/日文/韩文)full-widthandwidecharacters(也向下滚动图表)；这些

  7. 欧拉角表示的姿态矩阵（313和312转序） - 2

    一、习惯约定图片来自PSINS（高精度捷联惯导算法）PSINS工具箱入门与详解.pptx二、基本旋转矩阵绕x轴逆时钟旋转α\alphaα角度Rx(α)=[ 1000cos⁡αsin⁡α0−sin⁡αcos⁡α]R_x(\alpha)=\begin{bmatrix}\1&0&0\\0&\cos\alpha&\sin\alpha\\0&-\sin\alpha&\cos\alpha\end{bmatrix}Rx​(α)=​ 100​0cosα−sinα​0sinαcosα​​绕y轴逆时钟旋转α\alphaα角度Ry(α)=[ cos⁡α0−sin⁡α010sin⁡α0cos⁡α]R_y(\alpha

  8. ruby-on-rails - Ruby slim - 来自变量的 div 类 - 2

    我知道这篇文章在这里:RubySlim-Howdoyoudefineanelement'sclasswitharailshelperorvariable?我已经尝试了所有三种解决方案。不幸的是，对我来说，没有一个在工作。论坛.rb.panel.panel-heading.span=@forum.name.panel-body.row.col-md-7#{t('global.topic')}.col-md-3.value.title.col-md-1.value.topic.col-md-1.value.dateforum_feed.js.coffeewindow.ForumFeedUI

  9. ruby-on-rails - Rails 通过 div 包装有错误的字段 - 2

    当验证未通过时，如何停止Rails更改我的代码。每次rails用包裹我的字段...我可以编辑fields_with_error类.fields_with_error{display:inline}这行得通，但它是hacky 最佳答案 没关系。使用CSS而不是这样做。ActionView::Base.field_error_proc=Proc.newdo|html_tag,instance_tag|"#{html_tag}"end我觉得这更hacky:) 关于ruby-on-rails-R

  10. ruby - 为什么百分号中使用不同的分隔符？ - 2

    我见过不同的人为此使用不同类型的牙套/括号。我在脚本控制台中试用了它们，它们都有效。为什么它们都有效？使用哪个有关系吗？%w|onetwo|%w{onetwo}%w[onetwo]%w(onetwo)实际上，可以使用更多种类的字符。可以使用除=之外的任何非字母数字字符。%w!a!%w@b@%w#c#%w$d$%w%e%%w^f^%w&g&%w*h*%w(i)%w_j_%w-k-%w+l+%w\m\%w|n|%w`o`%w~p~%w[q]%w{r}%w;s;%w:t:%w'u'%w"v"%w,w,%w%w.y.%w/z/%w?aa? 最佳答案

随机推荐