13

左にフロートするように設定された 4 つの div がありますが、最後の div は小さい画面で 2 つの新しい行をラップし続けます。画面サイズの...そしてテーブルを使用しないようにしています（これは、彼らにv.reliableを与えるのに非常に魅力的です!!!）

この厄介な問題を修正して、画面サイズに関係なく常に位置を維持する方法を考えています??

私はこれをCSSとして持っています：

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

私のHTML：

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

助けてください:D

4

7 に答える 7

4

ラッパーは、4 つの固定幅の子要素がフローティングされたパーセンテージ幅のコンテナーです。

ラッパーの幅はビューポートの幅に依存します。ラッパーの幅が 4 つの子要素の幅を合わせた幅よりも小さくなるまでビューポートが狭められている場合、当然、すべてが収まらないため、ラップされます。

修正は、ラッパーが子の組み合わせよりも小さくならないようにすることです。

したがって、子要素の幅、境界線、およびマージンを合計してから、ラッパーにそれmin-widthに等しい属性を与えます。

于 2012-06-05T04:10:06.027 に答える
2

こんにちは、このデモを確認する必要があると思います

.wrapper {
  margin: 0 auto;
  width: 80%;
  border: solid 1px red;
  overflow: hidden;
}
.gridf,
.grid,
.gridl {
  Background: green;
  width: 24%;
  min-height: 100px;
  float: left;
  margin: 2px 0;
}
.gridf {} .grid {
  margin: 2px 1%;
}
.gridl {
  background: yellow;
}
<div class="wrapper">

  <div class="gridf">One</div>
  <div class="grid">Two</div>
  <div class="grid">Three</div>
  <div class="gridl">Four</div>

</div>

于 2012-06-05T04:39:07.433 に答える
1

このjsFiddle exampleのように、ラッパーからテーブルセル表示ルールを削除し、子 div にパーセンテージ (または最小幅) を設定してみてください。

于 2012-06-05T03:52:53.693 に答える
0

HTML 

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div>

</div>

CSS

.wrapper{
    margin:0 auto;
    width: 80%;
    display: inline;
}
.gridf{
    float:left;
    margin-right:3px;
    width:20%;
    min-height:200px;
    border:1px solid red;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:20%;
    min-height:200px;
    border:1px solid red;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:20%;
    min-height:200px;
    border:1px solid red;
}

参考までに、デモのURLも追加しました。http://jsfiddle.net/sg8FE/

アップデート

display:inlineラッパークラスを変更するだけでdisplay:block、すべてが正しく、divが中央に配置されます。

于 2012-06-05T04:14:31.063 に答える
0

それはトリックを行う必要があります:

 <div class="wrapper">
     <div style="width:850px">
        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>
     </div>
 </div>

そして、それはどのブラウザでもサポートされます。 http://jsfiddle.net/5GrKU/3/

于 2012-06-05T03:55:04.570 に答える
0

内側の div に固定幅を指定することで、ビュー ポートのサイズに関係なく、その幅を強制します。外側の div の幅を 80% にすると、ビュー ポートの幅に合わせてサイズが縮小されます。これらすべての div に固定幅を与えるか、すべてに相対的な幅を与える必要があります。

于 2012-06-05T06:50:53.893 に答える