2

次の例があります: http://jsfiddle.net/dwDZx/10/

html

<div id="container">
    <div id="div1" class="regularContainer">
        <div>one</div>
    </div>
    <div id="div2" class="regularContainer">
        <div>two</div>
    </div>
</div>​

CSS

* {
  margin:0;
  padding:0;
}

#div1 {
  float:left;
  margin-right:2%;
  margin-bottom:10px;
  max-width:300px;
  width:47%;
  background-color:#d3edff;
  border-color:#00b5ff;
  padding-bottom:8px;
}

#div2 {
  float:left;
  max-width:300px;
  width:47%;
}

.regularContainer {
  float:left;
  padding:7px;
  background-color:#fff;
  border:1px solid #00b5ff;
  width:784px;
}

問題は、2 番目のボックスが横に倒れるまでボックスのサイズが変更されないことですか? 私が必要としているのは、ボックスのサイズを常に変更し、一列に落ちないようにすることです。

これはどのように行うことができますか？

4

2 に答える 2

2

パーセントのみを使用すると、レスポンシブになります。

ここにレスポンシブhttp://jsfiddle.net/dwDZx/11/があります

以前から幅を 45% に、パディングを 1% に変更しました

* { margin: 0; padding: 0; }

#div1
{
    float:              left;
    margin-right:       2%;         
    margin-bottom:      10px;
    max-width:          300px;
    width:              45%;
    background-color:   #d3edff;
    border-color:       #00b5ff;
    padding-bottom:     8px;
}

#div2
{
    float:              left;
    max-width:          300px;
    width:              45%; 
}

.regularContainer
{
    float:                      left;
    padding:                    1%;
    background-color:           #ffffff;
    border:                     1px solid #00b5ff;
    width:                      784px;
}

</p>

于 2012-12-22T10:24:38.517 に答える
1

Twitter Bootstrap を使用しないのはなぜですか? レスポンシブデザインに最適です。問題を解決する container-fluid、row-fluid、spanxx などのクラスがあります。

于 2012-12-22T10:23:00.830 に答える