CSS：在右侧填充剩余空间，没有内容溢出

我有一个固定宽度的左侧div，我想让右侧div填充剩余空间。CSS：在右侧填充剩余空间，没有内容溢出

到目前为止，我一直在taking this approach recommended by another SO poster，但它不工作，如果我有正确的div内的内容。

右侧div的内容设置为width: 100%，所以我认为它不会比右侧div宽，但会溢出右侧div。

<div> 
    <div id="left">left</div> 
    <div id="right">right<div id="insideright">overflows</div</div> 
</div> 

<style> 
#left { 
    float:left; 
    width:180px; 
    background-color:#ff0000; 
} 
#right { 
    width: 100%; 
    background-color:#00FF00; 
} 
#insideright { 
    width: 100%; 
    background-color: blue; 
    height: 5px; 
} 
</style>

的jsfiddle这里，demoing问题：http://jsfiddle.net/MHeqG/155/

我能做些什么？

我想支持较旧的IE浏览器，所以我宁愿不使用display: table-cell等，如果我可以避免它，或者至少不是没有合理的回退。

来源

2014-01-15 flossfan

你可以通过引用股利（或多个）你的实际ID澄清你的问题谈论？ “正确的div中的内容......”哪个版权？ – brandonscript

请定义“旧浏览器” –

其溢出，因为您将其宽度属性设置为浮动元素旁边的屏幕的100％。它一路继续，因为没有元素可以阻止它。你应该在漂浮物 – agconti

-1

不确定你想要做什么（你对right的引用是不明确的）。但如果我理解，你想insideright嵌套在right没有溢出？

为什么不使用<span>代替？开箱即用的<div>是display: block;这将强制这样的包装。或者，通过使用display: inline;或display: inline-block;覆盖此行为。

<div> 
    <div id="left"> 
     left 
    </div> 
    <div id="right"> 
     right 
     <span id="insideright">this should not overflow right</span> 
    </div> 
</div>

http://jsfiddle.net/brandonscript/MHeqG/157/

来源

2014-01-15 23:49:56 brandonscript

我同意，如果你可以使用''做到这一点。 – gfrobenius

这是不正确的，只需添加一个'
'，你就是问题的开始。 –

@ RokoC.Buljan，虽然会溢出'right'而不是'insideright'？真的，在这种情况下很难解决这个问题 - 我需要看到一个真实世界的例子来改善答案。当然，除非我们谈论“overflow：hidden;'或'white-space：no-wrap;'但这是完全不同的问题/答案。 – brandonscript

其实这是很简单的......不添加100%向右DIV :)
只需添加overflow财产

LIVE DEMO

#left { 
    float:left; 
    width:180px; 
    background-color:#ff0000; 
} 
#right { 
    overflow:auto; 
    background-color:#00FF00; 
} 
#insideright { 
    background-color: blue; 
}

...如果你甚至怀疑如何使红（左）DIV填补剩余的高度... DEMO

来源

2014-01-16 00:08:37

我正准备发布你的第二个演示文件......好的 –

@JonP谢谢！，是的，我立刻做了，所以我不需要以后再做。如果不是OP，可能会被其他人问到。 –

CSS：在右侧填充剩余空间，没有内容溢出

回答

相关问题