1

私は次のCSS宣言を使用しています：

.hentry,
.no-results {
    float: left;
    margin: 0 0 1.625em;
    position: relative;
    width: 32%;
    max-width: 260px;
    min-width: 130px;
}

これをアーカイブするには：

ここに画像の説明を入力してください

ここに画像の説明を入力してください

基本的に、中央のサムネイルを除いて流動的なレイアウトです（部分的に流動的です）。要素を積み重ねる唯一の方法は、要素の幅（この場合）を定義することであることに気付きましたmin-width。

ここで、ブラウザのウィンドウがこのサイズに達したとき：

ここに画像の説明を入力してください

右側にスペースが残っています。

右側のスペースを画像で埋めることができるのではないかと思いました。

編集：画面解像度の傾向（iPad、Android、iPhoneなど）に応じてdivの幅を定義する必要がありますか？

4

1 に答える 1

2

何を達成しようとしているのかわかりませんが、画面のサイズに関係なく、すべてを揃えようとしていると思います。

「オーバーフロー非表示」divで負のマージンを持つパディングを使用できます：例：

/* wrapper around the text divs */ 
 ParentDIV {
width:100% ;
overflow:hidden ;
float:left
}

/* child divs for text */ 
Child1, Child2 , Child3 {
width:33% ; 
padding-bottom : 600px ;
margin-bottom  : -600px ; 
float:left
}

/* image div for images */ 
Imagewrap {
width:100% ; 
float:left
clear: both ; 
}

htmlは次のようになります：

<div class="ParentDIV">
    <div class="Child1">
       <div class="Imagewrap"><img1></div>
       <p>text</p>
    </div>
    <div class="Child2">
       <div class="Imagewrap"><img2></div>
       <p>text</p>
    </div>
    <div class="Child3">
       <div class="Imagewrap"><img3></div>
       <p>text</p>
    </div>
</div>

この設定により、すべてが調整されます。写真に関しては、流動的な幅を与えてください。あなたの場合、100％で十分だと思います。画像の流動的な幅は、画面の解像度に応じて画像を拡大または縮小することを忘れないでください。したがって、これは完全な修正ではありません。

于 2011-09-03T14:53:53.757 に答える