相关疑难解决方法(0)

我想要一个双列div布局,其中每个都可以有可变宽度,例如

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度.目前我的'view'div被调整为它包含的内容.如果两个div占据整个高度也会很好

不重复免责声明:

当float:left设置时,将div扩展到max width, 因为左边的一个具有固定的宽度.

帮助div - 使div适合剩余的宽度, 因为我需要两个向左对齐的列

假设你有一些风格和标记:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

当你看到这个.该<ul>有一个在底部的滚动条,即使我已经溢出X/Y指定的可见和隐藏价值.

(在Chrome 11和opera(？)上观察到)

我猜测必须有一些w3c规范或者某些东西告诉这件事发生但是对于我的生活我无法理解为什么.

的jsfiddle

更新: -我找到了一种方法来通过添加另一个元素来实现相同的结果ul.看看这个.

我试图使用CSS动态更改div的宽度,而不是jquery.以下代码适用于以下浏览器:http://caniuse.com/calc

/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);

我也想支持IE 5.5及更高版本,我发现以下内容:表达式.这是正确的用法:

/* IE-OLD */
width: expression(100% - 500px);

我还可以支持Opera和Android浏览器吗？

您知道这个古老的问题:包含浮动元素的容器不会自动扩展其高度以包围其子级.

修复此问题的一种方法是"clearfix",它添加了许多CSS规则以确保容器正确伸展.

但是,只是提供容器overflow: hidden似乎也可以正常工作,并具有相同的浏览器兼容性.

根据本指南,这两种方法兼容当今所有重要的浏览器.

这是否意味着"clearfix"已被弃用？使用它还有什么好处overflow: hidden吗？

这里有一个非常相似的问题:clearfix hack和overflow之间有什么不同:hidden vs overflow:auto？ 但问题并没有真正回答那里.

这个小提琴最好用以下HTML 解释这个问题:

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

CSS:

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

基本上,我想知道为什么overflow: hidden导致外部元素在高度上增长,包含两个浮动元素？

当我创建我的(第一个!)两列时,我的问题出现了.

我的左右列有一个包装器,但是包装器的高度没有扩展到适合左右列,每个列分别浮动到它的侧面.

我在网上找到了一个解决方案,它添加了样式(这是正确的词吗？)'overflow:auto'到包装器.经过一些研究,我发现了几篇解释溢出功能的文章,包括这个stackoverflow答案:为什么"overflow:hidden"清除浮动？

但是,我的研究中没有任何内容能够解释为什么包装器的高度不会自动扩展以适应嵌套的div,即两列.

嵌套在div中的所有东西都不包含在div中吗？这不会为内部元素创建边界吗？

对于这个noobie,任何帮助都表示赞赏.谢谢!

当我使用时overflow: hidden,这些容器周围会出现顶部和底部边距.我真的不明白为什么会这样.我正在寻找一个解释来帮助我更好地理解CSS.

这是代码:

CSS代码:

#container {
    border: 2px solid black;
    overflow: auto;
}
.field {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 5px;
    border: 5px solid #FC0;
    line-height: 1.5em;
    overflow: hidden;
}
.w50 {
    width: 50%;
}
.w100 {
    width: 100%;
}

HTML代码:

<div class="w50" id="container">
    <div class="field w50">
        <input type="text" size="100" value="input field that overflows @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@">
    </div>
    <div class="field w50">content</div>
    <div class="field w100">content</div>
</div>

如果我不使用overflow: hidden,容器没有顶部和底部边距,但我确实有溢出问题.

http://jsfiddle.net/8ErHQ/2/

如果我使用overflow: hidden,容器(显然)有顶部和底部边距,但我的溢出问题消失了.

http://jsfiddle.net/8ErHQ/1/ …

有没有一种方法可以防止绝对定位的元素在overflow-y设置后触发滚动条？我的印象是不会，因为绝对定位的元素通常不会影响父元素的宽度/高度。出于某种原因，这对于确定是否在设置了overflow-y：auto时是否显示滚动条并不重要。有没有一种方法可以解决此问题，而无需将下拉内容放在DOM中完全不同的位置？

我只希望通常会使元素增长的事物才能触发滚动条。

这是显示此问题的一个codepen：

http://codepen.io/isaksky/pen/zxedXe

在CSS3特定的开发过程中,white-space-collapsing考虑了引入.

这样的属性将有助于解决当今常见的HTML/CSS问题.

不幸的是,目前的CSS3规范不再包含此属性.

但是,类似的属性也可以为CSS-text-4考虑现在提出上述问题的解决方案.这次是该财产的工作头衔text-space-collapse.

我的问题是:没有引入white-space-collapsingCSS3而是将其推迟到CSS-text-4 的原因是什么？

编辑:我正在寻找答案

• 是非推测性的,所以答案要么基于公开来源(如邮件列表,规范编写者的博客条目,规范作者会议记录),要么直接来自规范编写者.(其中一些可能已经在这里注册或有一天在这里注册,就像在类似的情况下已经是这种情况).
• 给出明确的解释或理由为什么这个特定的white-space-collapsing属性还没有包含在CSS3规范中.(我真的不明白:是什么让规范编写者确定该属性是如此不清楚,以至于它不得不推迟到以后的标准？)所以我不是在寻找太宽泛的答案:"嗯,有时,规范编写者根本不认为他们的规范在某种程度上是完整的."
• 不应被视为实际参与有关该主题的讨论.(或者换句话说:我不是在问人们怎么会觉得这个属性被推迟了.我只是要求规范编写者明确说明这个决定的原因.所以如果从字面上看,这个问题不应该导致与任何形式的内容相关的讨论.)

关于Meta的这类问题的讨论表明,通过赋予它更实际的观点可以改善这个问题.所以这是另一种说法:"如果我要实现一个全新的浏览器或者为现有浏览器添加新功能,为什么我不想像white-space-collapsingCSS3规范的早期版本中那样实现该属性？ "

然而,通过以这种方式解释我的原始问题,它肯定成为意见的邀请.这不是我想要的.我正在寻找"过去推理"的解释.因此,问题的一个可能更好的方法是:"让我们假设我要实现一个全新的浏览器或者为现有浏览器添加新功能.现在我不想遇到CSS3预见的问题/挑战规范编写者white-space-collapsing在规范开发过程中从中删除了属性.为了避免浏览器开发过程中出现的预见问题/挑战:为什么规范编写者不在CSS3规范中包含该属性？"

我知道这个问题可能很难回答,但它肯定对一个明确的(并且希望是明确的)答案负责.

这个问题的一个非常好的答案不仅包括它背后的推理和适当的来源,还包括一些例子.可以在这里找到一个很好的答案(另一个类似的问题)的例子:https://stackoverflow.com/a/11854515/1560865

这个问题类似于这一个(有一个很好的答案),但我的不属于浮动的问题.

我最近在尝试将边距应用于块级元素的唯一子节点时遇到了一些麻烦:

#parent {
    background: rgba(255, 0, 0, 0.1);
}

#child {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 255, 0, 0.1);
}

<div id="parent">
    <div id="child">Foo</div>
</div>

虽然应用了保证金,但父母的背景却不是.除非在之前和之后添加兄弟姐妹#child,或者(在我看来更有趣的是)添加overflow除了visible设定之外的任何值,否则这仍然是正确的.这是相同的示例,但具有溢出值:

#parent {
    background: rgba(255, 0, 0, 0.1);
    overflow: auto;
}

#child {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 255, 0, 0.1);
}

<div id="parent">
    <div id="child">Foo</div>
</div>

从CSS2.1第9.4.1节 - 块格式化上下文中,我发现了以下内容:

浮动,绝对定位元素,阻止不是块框的容器(例如内联块,表格单元格和表格标题),以及"溢出"除"可见"之外的块框(除非该值已传播)到视口)为其内容建立新的块格式化上下文.

在这个例子中,我真的很难理解"溢出而不是可见"逻辑背后的基本原理.在这种情况下,边缘似乎没有被削减,因为唯一要改变的是背景.有人能证明为什么价值overflow: visible创造了这样的情况吗？

我有一个图像float:left,我希望它溢出它的父母,但切断了溢出.这是没有任何overflow规则的情况:

这就是我想要的:

这是一个小提琴:http://jsfiddle.net/ZA5Lm/

出于某种原因,决定在overflow:hidden没有明确的高度导致元素增长的情况下.

如果不设置明确的高度,我可以以某种方式实现我的效果吗？显式高度不起作用,因为我希望此div根据内容长度和浏览器宽度自动调整大小.

我有时觉得方便给一个元素的大小的方面bottom，top，left和right性能，而不是使用width和height。例如，这是此处接受的答案：

CSS 100％高度，带填充/边距

但是，由于某种原因，这不适用于svg元素。我已经使用最新的稳定版Firefox和Chrome尝试了以下示例。该svg元素莫名其妙地要采取的大小300x150：

小提琴

为什么？