Question

我正在尝试创建一个网页，其中彼此相邻的2个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>

Answer 1

您可以使用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/

Answer 2

或者

 <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>

将两个灵活的div放在一起

2 个答案: