0

我正在尝试创建一个网页，其中有 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>
4

2 回答 2

2

您可以为此使用 CSSdisplay: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-13T11:52:51.330 回答
0

或这个

 <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-13T11:58:54.747 回答