0

柔軟な2つのdivが隣り合っているWebページを作成しようとしています。そのため、ブラウザウィンドウが一緒に圧縮されると、各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 に答える