草庐IT

包装类

全部标签

html - 如何制作页面全高的包装器?

请访问http://appkify.com,它的wordpress网站。当您单击“类别”选项卡时,包装器的高度会降低到内容高度。他们有什么办法让它全高吗?我尝试添加以下属性,但它随后使正文背景成为所有帖子的边框。html,body,#wrapper{height:100%;} 最佳答案 Wrapper具有自动高度。它被创建了。当您向其中写入内容时,它会变大。然而,通过将高度设置为100%,当在编写包装器时发生溢出时,它将在您的网页上而不是在浏览器上出现滚动条。 关于html-如何制作页面

javascript - flex 元素不包装在列方向 flex 盒中

我有一个outerWrapper、innerWrapper和子项。outerWrapper的高度为300px,并且是display:flex。innerWrapper也是display:flex,并且是flex-direction:column。当我将align-items的值除stretch之外的任何值添加到outerWrapper时,子项显示一长列。他们忽略了300px高度。这是它如何显示的图像:它应该像这样显示:只需使用align-items:flex-end。为什么会这样,我如何使用align-items:flex-end并让子项像第二张图片一样显示?JSFiddle#oute

javascript - 带有可包装的标签+字段单元的表单,但在包装时可以很好地排列

我有一个由一系列标签和字段组成的流体设计表单,我希望它们一个接一个地流动,并在必要时折叠起来以支持窗口的宽度。(标签和输入必须作为一个单元流动,一行末尾没有悬挂标签,其输入在下一行。)但是当它们换行时,我希望字段以整齐的方式排列。有什么方法可以用HTML和CSS做到这一点吗?(不幸的是,我必须支持没有CSS3列的旧浏览器[如果它们在这里能提供帮助的话]。)我已经尝试了几种方法,例如给标签(好吧,它们中的跨度)固定长度(您需要单击代码段中的“全屏”按钮,这样代码段窗口的宽度是'不固定):.wrapped-fieldslabel{display:inline-block;}.wrapped

html - flex 包装 : nowrap width doesn't include children

flex-wrap:nowrap的flexbox不应该自然地是它的child的宽度吗?出于某种原因,它只是其父元素的宽度。是否有可能让它获得其child的宽度?在thiscodepen您可以看到背景并没有扩展所有子项的整个宽度。.flex{display:flex;flex-wrap:nowrap;background-color:lightblue;}.flexdiv{flex-basis:75%;flex-shrink:0;}hihihihi编辑:我使用“应该”是基于这样的假设:一个典型的带有white-space:nowrap的div应用于内联子元素会增长容纳其子女;然而,这似乎

css - 具有百分比宽度值的 DIV 图像包装高度错误

我想将图像包装到htmlDIV中,因为我希望它可以随窗口大小完全缩放,所以我想设置DIV百分比如下:htmlCSS#wrapper{position:absolute;width:50%;}#wrapperimg{width:100%;}图像应决定其容器的高度。这是因为图像宽度设置为100%,并且图像高度是根据正确的宽高比计算的。结果在jsfiddle上可见:http://jsfiddle.net/lorenzopolidori/5BN4g/15/我的问题是:为什么所有现代浏览器都将包装器DIV渲染为比内部图像高5px?如何消除这个5像素的差距,同时仍然以百分比设置所有尺寸并且不使用j

javascript - 在纯JavaScript中用span标签将单词包装在字符串中的最简单方法?

Thisquestionalreadyhasanswershere:Howtohighlighttextusingjavascript(13个回答)3年前关闭。我想在字符串中设置一个单词的样式(在这种情况下,该字符串是“菠萝屋”,方法是先将该单词包装在一个范围内。如何用纯JavaScript做到这一点?input:pineapplehouseoutput:pineapplehouse#word{color:yellow;}我已经试过了:string.replace(word,{word});但这只是将一个对象放在字符串的前面,而实际上并没有将单词包装在一个范围内

html - 按比例增加/减少包装

demohtml...sometextherenextgoeshereCSS...img{background-color:red;display:block;border:2pxsolidwhite;}我尝试过的:#maintable{width:200px;display:table;table-layout:fixed;}demoWhatIwantishere:原始尺寸:当我调整主要尺寸时: 最佳答案 使用缩放属性,例如:#maintable{width:300px;display:table;table-layout:fix

html - 为什么我的 flex 元素没有包装?

所以我在它们自己的flex-itemdiv中添加了3个图像,它们都位于一个flex-containerdiv中,图像随着我缩小浏览器窗口而缩放,但是它们都保持内联而不是包装并成为单列,关于如何让它们换行的任何想法?这是它的样子:divclass="intro">InanutshellSantoriniisoneoftheCycladesislandsintheAegeanSeabelongingtoGreece.Itboastsmassesofbreathtakingcliffsrisingover300mfromasubmergedcaldera.Oneoftheofthemosts

javascript - 你如何创建一个像 jquery 一样充当函数的包装器对象

我不知道从哪里开始,但我想要或需要的是HTMLElement的包装函数,所以我不扩展HTMLElement类,而是扩展我自己的对象,然后检查hasclass以查看元素是否有类等等等,但我的代码根本不起作用它说$(...).hasClass不是函数$=function(a,b){this.$el=document.querySelector(a);returnthis;}Object.assign($.prototype,{hasClass:function(selector){returnthis.$el.classList.contains(selector);}})console.

css - 使用 section 元素进行样式布局和包装

我经常将div用于样式布局(没有内容的标记片段,特别关注设计)和网站包装器。话虽如此,为什么不应该将部分用于此任务?节本身是否具有不鼓励将其用于包装器的内在语义?几乎我使用的每个页面都有某种包装或风格布局。想要逐步淘汰div,我想知道部分是否可以用于包装器并且仍然在语义上是正确的。 最佳答案 是的,section元素具有“固有语义”。请参阅HTML5规范中的定义:divelement:Thedivelementhasnospecialmeaningatall.sectionelement:Thesectionelementrepre