3

これは私にとって非常に奇妙です。私は検索しましたが、誰もが私とは逆の問題を抱えているようです (フローティング div の縮小)!

私はこのページを持っています: http://www.tameside.gov.uk/test/newsは、PHP を使用して、さまざまなニュース記事の上部に div を生成し、正常に動作します。ただし、アイテム (フローティング div) は左にフローティングされた div にあり、何らかの理由でそれらのアイテム (コンテンツのみ) に縮小されません。

私の知る限り、フローティング div は常にその内容に合わせて縮小されますが、この特定の div はページの 100% に拡大されているようです。私が何を意味するかを示すために、含まれている div の背景を灰色で着色しました。

コンテンツに縮小してセンタリング トリックを使用できるようにしたいのですが、トップ ニュース項目に div がいくつあっても div がセンタリングされます。しかし、縮小していないため、明らかにこのトリックは機能していません。

各ニュース項目 div の CSS は次のとおりです。

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    float: left;
    width: 19%;
    text-align: center;
    margin-right: 0.5%;
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}

また、全体をリンクするために小さな CSS がアタッチされたスパンも内部に持っています。

.news-top-item span {
    display: inline;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 2;
    background-image: url('/tmbc_images/include/1pixel.gif');
    cursor: pointer;
}

干渉しているとは思えませんが、念のため入れておきました。

外側の div には「float: left」と背景色のみが適用されます。

どんな助けでも大歓迎です。

ありがとう、

ジェームズ

4

3 に答える 3

1

float:left を削除し、代わりに display:inline-block を使用する必要があります

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    display:inline-block;
    width: 19%;
    text-align: center;
    margin-right: 0.5%;
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}

そして、含まれているdivに text-align:center を追加します

于 2012-04-25T12:34:25.273 に答える
0

パーセンテージではなく絶対単位を使用して、内側の要素の測定値を定義します。

.news-top-item {
    border-radius: 10px;
    border-color: #3f7dae;
    border-style: solid;
    border-width: 2px;
    float: left;
    width: 200px; /* <--- */
    text-align: center;
    margin-right: 2px; /* <--- */
    height: 13em;
    padding-top: 0.5em;
    cursor: pointer;
    position: relative;
}
于 2012-04-25T11:52:08.417 に答える
0 
width:100%;
height:100%;

ウィンドウサイズの100％です...試してください

width:auto;
height:auto;
于 2012-04-25T11:30:13.190 に答える