相关疑难解决方法(0)
使div的高度随其内容而扩大
我有这些嵌套的div,我需要主容器扩展(高度)以容纳内部的DIV
<!-- head -->
...
<!-- /head -->
<body class="main">
<div id="container">
<div id="header">
<!--series of divs in here, graphic banner etc. -->
</div>
<div id="main_content"> <!-- this DIV _should_ stretch to accomodate inner divs -->
<div id="items_list" class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>
<div id="footer">
</div> …推荐指数
解决办法
查看次数
位置:绝对和父高？
我有一些容器,他们的孩子只是绝对/相对定位.如何设置容器高度,让他们的孩子在他们里面？
这是代码:
HTML
<section id="foo">
<header>Foo</header>
<article>
<div class="one"></div>
<div class="two"></div>
</article>
</section>
<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->
<section id="bar">
<header>bar</header>
<article>
<div class="one"></div><div></div>
<div class="two"></div>
</article>
</section>
CSS
article {
position: relative;
}
.one {
position: absolute;
top: 10px;
left: 10px;
background: red;
width: 30px;
height: 30px;
}
.two {
position: absolute;
top: 10px;
right: 10px;
background: blue;
width: 30px;
height: 30px;
}
这是一个jsfiddle.我希望"条形"文本出现在4个方格之间,而不是它们之后.
任何简单的修复？
请注意,我不知道这些孩子的身高,我不能设置身高:容器的xxx.
推荐指数
解决办法
查看次数
具有绝对/固定子项的父容器上的自动高度
我试图设置一个自动高度div包含2个子元素,定位固定,绝对绝对.
我希望我的父容器具有自动高度但我知道这很难,因为子元素从页面结构中取出它们的位置.
我已经尝试将高度设置为我的父div工作,但是我的布局响应,当它缩小到移动时,高度保持相同,其中内容变得堆叠,因此高度需要随着其子项而增加.
不确定这是否有意义,我没有我的实际代码在我自己,但我做了一个小提琴试图解释...
推荐指数
解决办法
查看次数
CSS网格布局中列的反向顺序
我希望使用CSS Grid来反转两个并排div的明显顺序,其中一个div任意增长(我不想使用浮点数).
我在这里创建了一个plunkr:http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7？p = preview
#container {
grid-template-columns: 240px 1fr;
display: grid;
}
.a {
background: yellow;
}
.b {
background: blue;
color: white;
}
#container>.a {
grid-column: 1;
}
#container>.b {
grid-column: 2;
}
#container.reverse>.a {
grid-column: 2;
}
#container.reverse>.b {
grid-column: 1;
}<div id="container" class="reverse" style="width: 800px;">
<div class="a">A</div>
<div class="b">B</div>
</div>它的关键在于,当我.reverse应用了类(因此你应该看到B | A)时,B它会偏移到一个新行,所以它看起来更像:
| A
B
如果我颠倒的文件排序.a用.b,这又回到了正常(当然,如果我把.reverse班,我得到了同样的问题).
为什么会这样,我该如何解决？
推荐指数
解决办法
查看次数
拉伸div以适合绝对定位的内容
有没有办法用css而不是脚本来做到这一点？我有一个最小宽度的div,它内部是一个绝对定位的内部div,动态生成可变宽度的内容.有时内容超出了包含div,但由于它的绝对位置,它不会拉伸包含div.如何让它延伸包含div？谢谢
推荐指数
解决办法
查看次数
根据子元素的高度（绝对位置）增加父元素的高度（相对位置）
如何根据具有绝对位置的子元素高度来增加具有相对位置的父元素的高度。
在我下面的示例中，.parent元素的高度显示为0px
PS：我不想使用任何脚本
预期的：
我得到什么：
HTML：
<div class="parent">
<div class="child" style="top:20px;">Hello</div>
<div class="child" style="top:40px;">Some content</div>
<div class="child" style="top:60px;">Some more content</div>
</div>
CSS：
.parent{position:relative;background:green;height:100%;border:1px solid #000000;width:250px;}
.child{position:absolute;}
推荐指数
解决办法
查看次数
绝对位置不在父级内
我的 CSS 有关于 div 位置的问题。
我有一个父 div 设置为position:relative和一个子 div 设置为position:absolute
但由于某种原因，子 div 显示在父 div 的边界下方和外部...
这是我的 CSS：
.big{
position:relative;
width:40%;
border:1px solid black;
display:inline-block;
}
.small{
position:absolute;
width:75px;
height:75px;
border:1px solid green;
}
HTML：
<div class="big">
<p align="center">Test</p>
<div class="small"></div>
</div>
<div class="big">
<p align="center">Test</p>
<div class="small"></div>
</div>
我提供了一个 JSFiddle 来向你展示它的实际效果：
我如何修复它以使子 div 在使用时位于父 div 内position:absolute？
推荐指数
解决办法
查看次数
如何让两个元素共享一个框阴影
所以我处于一个棘手的情况：我有div一个包含内部div和ul类似的外部包装器：
<div id="wrapper">
<div id="box"></div>
<ul id="list">...</ul>
</div>
在#list具有绝对定位是正确的下面#box，因为它出现和消失但不动它和其他元素的网页内容。
由于它是绝对定位的，如果我在 周围添加边框#wrapper，它只会围绕#box。box-shadow当然行为相同。问题是，我需要一个可以无缝地围绕这两个元素的阴影。
我在搜索 google/stackoverflow 时遇到的三个解决方案是：
给这两个元素自己的阴影，然后使用它
-webkit-clip-path来消除 上的顶部阴影#list，使其看起来像一个阴影围绕着该组。虽然这有效，但阴影相遇的部分有一种奇怪的剪贴画效果。所以这个方法有效，但看起来不太好。链接到描述解决方案的答案。使用等于模糊负值的散布，然后使用 3 个阴影，一个用于 的每一侧
#list。理论上很好，但在实践中，侧面的阴影现在不会沿着整个长度。链接到描述解决方案的答案。这是我尝试的jsfiddle。使用一个
:before或:after伪元素来掩盖重叠的阴影。这对于类似颜色的盒子非常有效，但我的ul和其中的div内容无法覆盖！链接到描述解决方案的答案
我有点陷入困境，因为我真的很喜欢周围#box和#list一起的阴影，但似乎无法找到适合我的特定情况的解决方案。任何建议都会非常有帮助！
注意：我实际上使用的是 Electron 框架，所以该解决方案必须在 Chrome 上运行，但它只需要在 Chrome 上运行！
推荐指数
解决办法
查看次数
如何在不使用绝对位置的情况下在书中制作翻页效果，或者使相对定位的div适应内容大小？
我有一个代表书页并包含正面和背面元素的 div。单击后，页面会翻转以显示反面。
\n为了使样式正常工作，我使 book div（包含页面 div）具有position: relative，并且 paper（代表页面）div 具有position: absolute样式。
然而，宽度和高度bookpx 为单位设置，因此当纸张内容不适合尺寸时，内容会溢出：
在内容适合的页面上，看起来不错：
\n
我该如何制作paper元素适应内容的大小？那么如果有多个页面，每个页面的高度将等于内容最多的页面的高度？
let pages = document.getElementsByClassName("paper");\n\nsetup(pages);\n\nfunction setup(elements) {\n for (let i = 0; i < elements.length; i++) {\n let previous = i === 0 ? null : elements[i - 1];\n let element = elements[i];\n let next = i === elements.length - 1 ? null : elements[i + 1];\n\n element.addEventListener(\'click\', …推荐指数
解决办法
查看次数
为什么 <style> 标签在此代码中不起作用？
所以标签似乎从来都不太喜欢我。它总是给我带来问题，但结果总是证明他们的解决方案是显而易见的，而我只是愚蠢。但这一次，我花了 4 小时试图找出可能出了什么问题（这正是我什至将正文内容 div 命名为“body”的原因，我知道这是不必要的，哈哈）。这是代码：
\n<!DOCTYPE html>\n<!--\xc2\xa9 Copyright LightVoid Studio-->\n<html style="font-family: Helvetica, Cursive; color:white;">\n<head>\n<meta charset="UTF-8">\n<title>LightVoid Studio</title>\n</head>\n\n<style>\n .body {\n background-color:#1A2B30;\n }\n </style>\n<!--break-->\n\n<body>\n<div class="body">\n<strong>\n<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>\n<p style="position:absolute;top:140px;left:20px;">This is the official LightVoid Studio\nwebsite. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid\nStudio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>\n\n</div>\n</body>\n\n\n<!--break-->\n\n</html>`\n推荐指数
解决办法
查看次数