把两个灵活的div彼此相邻

我想创建一个网页，其中有2个彼此相邻的灵活的div。所以当浏览器窗口压缩在一起时，每个div都会随着浏览器的宽度而缩小（直到某个点）。我遇到的问题是，在下面的解决方案中，当浏览器窗口变得足够小时，div不会缩小，而只是在它们之间断开...把两个灵活的div彼此相邻

我知道我错过了简单的东西。 ..只是不知道它是什么：

<html> 
<body> 

<div style="border-style:solid;border-color:green;max-width:100%;overflow: hidden;"> 
    <div style="float:left;border-style:solid;border-color:red;background-color:transparent;padding:15px 30px 0px 30px;min-width:100px;max-width:100%">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div style="overflow: hidden;float:right;border-style:solid;border-color:yellow;min-width:100px;max-width:100%;max-height:100%;">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
</div> 

<body> 
</html>

来源

2012-05-13 rockit

您可以使用CSS display:table-cell属性为此。像这样写：

.parent{ 
    display:table; 
    width:100%; 
} 
.parent > div{ 
    display:table-cell; 
    min-width:100px; 
    background:red; 
} 
.parent > .right{ 
    background:green; 
}

检查：http://jsfiddle.net/Ld3r6/

来源

2012-05-13 11:52:51 sandeep

感谢，它的工作！显示：外面的表格，显示：表格：左边内部的单元格，并且移除浮动解决了问题 – rockit

或本

<style> 
.col  {width: 45%; float:left; border: solid 1px #ccc; margin: 0 10px 0 0;} 
.container {width: 80%; margin: 0 auto; } 
.clear {clear: both} 
</style> 
<body> 

    <div class="container"> 
<div class="col">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div class="col">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div class="clear"></div> 
    </div>

来源

2012-05-13 11:58:54 NickP

把两个灵活的div彼此相邻

回答

相关问题