草庐IT

layout_main

全部标签

html - 是否有一个完全为 "layout-neutral"的 HTML 容器元素?

有时我想在其他几个HTML元素周围放置一个包装器元素,唯一的目的是设置一个方便的CSS选择器来引用所有包含的元素:............在CSS中:#just-a-handywrapper*{...}我发现这比为#just-a-handywrapper*捕获的所有元素分配一个公共(public)类的替代方案更容易管理和维护。上面的选择器。在这个例子中,我使用了虚构的标签,...,等,因为所包含的元素强调了一个事实,即我正在寻找一种解决方案,无论内容中特定标签的性质如何。我还使用了虚构的标签TAG作为所需“包装标签”的占位符,因为我的问题恰恰是关于用于此目的的最佳HTML标签。我所说的

html - 可以溢出 :hidden affect layout?

除了引用以下exampleonJSFiddle,我没有办法解释这个-在其中,在我引入overflow:hidden属性后,最后一个蓝色框没有像预期的那样扩展到100%的宽度。我的印象是overflow:hidden只会影响可见性方面,不会干扰布局。有人可以解释这个例子中发生了什么吗?编辑:这个问题似乎仅限于webkit浏览器(例如Chrome) 最佳答案 这是因为overflow:hidden在其他属性中引入了一个新的blockformattingcontext.您可以在这篇很棒的文章中了解效果:Themagicofoverflow

html - 为什么 Float 优于位置 :relative and absolute while we can make layout quickly with position?

为什么Float优于position:relative和absolute而我们可以用position快速布局?在经济衰退时期,时间非常重要。当我们制作2-col、3-col或multi-col布局,然后在布局div中定位其他元素时。世界上大多数人都喜欢Float。为什么Float优于position:relative和position:absolute给中的任何元素定位和其他嵌套元素?如果使用position:布局页面/设计,我们可以创建一个设置为position:relative的容器div,允许标题、内容和导航divs在容器div内设置为position:relative,允许这些

css - <main> 元素在 Internet Explorer 11 中不起作用

我正在尝试设置的宽度元素与CSS。刚刚使用main{width:200px;}在除InternetExplorer之外的所有浏览器中都可以正常工作(Edge确实可以)。看看这个例子:JSfiddleIE11中的结果:Chrome中的结果: 最佳答案 InternetExplorer(seebrowsersupportdata)不支持HTML5main元素。您需要将main定义为block级元素,以便width正常工作。进行此调整:main{display:block;/*new*/width:200px;}因为InternetExp

HTML & CSS : Vertical Flow Layout (columnar style), 如何实现?

“流动”元素的标准CSS/html定位是水平的(基于行)=>float:left;。我需要做什么,才能像下面的示例(柱状样式)那样定位它们。是否有任何CSS标签可以在某处设置它?(理想情况下,我不想设置网格,这应该像在float:left样式中一样自动发生...)+---------------------------+|DivBox1||DivBox2||DivBox3|+---------------------------+添加后:多了2个盒子:+----------------------------+|DivBox1DivBox4||DivBox2DivBox5||DivBo

CSS - Internet Explorer 和 <main> 标签背景

我有一个非常简单的布局,在Firefox和Chrome中都可以很好地呈现,但是InternetExplorer(版本11)似乎无法为呈现任何类型的背景颜色。元素。我有元素作为的子元素元素而不是background或background-color似乎有什么区别。将始终与具有相同的背景.我还没有发现任何说明这是否是IE中的错误的信息。查看thisjsfiddle使用InternetExplorer了解我的意思。显然,我可以直接替换与并更新我的CSS选择器,但我想了解为什么会这样。 最佳答案 IE11不支持原生元素。您可以使用类似Mod

javascript - html5-script-attribute "data-main"是如何工作的?

例如requireJS使用以下语法:在其文档中您可以阅读:data-mainattributetellsrequire.jstoloadscripts/main.jsafterrequire.jsloads这(脚本加载顺序)怎么可能?如果js文件的名称是nomain.js,数据属性会是“data-nomain”吗?我在html5规范中没有看到相关信息,还是我看错地方了?谢谢 最佳答案 Howisthat(scriptload-order)possible?因为这就是require.js的目的,它由相当多的代码组成。那个特定的部分相当

html - 您可以在 <section role ="main"> 元素中使用 <aside> 元素吗?

我正在使用HTML5和WAI-ARIA改进我的HTML的可访问性。设置如下就OK了吗?ThemaincontentAllthetextthatgoeswiththemaincontentAtitleSometext我不确定的是我是否应该拥有之外的元素和role="main"容器。这重要吗? 最佳答案 确实很重要。放在哪里取决于aside标签中的内容与主要section的关系。例如:如果aside中的内容与正文相关,则应放在mainsection中。但是,如果sidebaraside标签中的内容与main不同,我会将其放在main部分

layout - 使用 <DIV> 标签实现 3 列网站的最佳方式?

关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭9年前。Improvethisquestion我正在使用如下布局开发一个3栏网站:.........但是,考虑到's的默认CSS“位置”属性是“静态的”,我的's正如预期的那样,一个一个地显示在另一个下方。所以我将CSS属性“position”设置为“relative”,并更改了“middle”和“right”的“top”属性's到-(减去)前一个的高度.它工作得很好,但是这种方法给我带来了两个问题:1)即使InternetExplo

html - 如何在 CSS Grid Layout 中设置列​​的最大宽度?

我想要实现的目标:使用CSSGridLayout,使页面的右栏大小从其内容派生,但最多只能占窗口宽度的20%。我认为它会如何运作:div{border-style:solid;}#container{width:300px;height:300px;display:grid;grid-template-columns:1frminmax(auto,20%);}somecontentLoremipsumdolorsitamet,consecteturadipiscingelit.Doneccursuseuleoacultrices.Vivamusornare,orcisedpretium