0

この css を理解するのはやや困難でした...基本的に、私が欲しいのはこの写真にあるものですが、コンテンツは動的に変化します。

ここに画像の説明を入力

基本的にすべての要素がラッパーに積み上げられ、写真とタイトルが動的に回転し、幅と高さが異なります。

<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>

私が試したことはすべてうまくいきませんでした。これについてどうすればいいですか？

私が得た最も近いものはこれですが、タイトルフィールドは高さを変更できるため、この方法は機能しません。画像を相対的に配置する必要があり、タイトル要素の拡大と縮小に伴って相対的な位置が変化するためです。

#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
4

3 に答える 3

1

中央のタイトルを意味する場合は、次のように使用します。

#title {
    margin: 0 auto;
    width: /* your width */
}

位置はラッパーで相対的でなければなりません。

JsFiddle UP

体の構造を再編成し、もう 1 つ div を追加してすべてをフローティングしました。次に、中央セクション内に、相対 div の中央に配置するようにスタイル設定できるタイトルと画像を追加しました。

于 2012-05-04T19:15:14.603 に答える
0

これらのソリューションはどれも正しく機能しませんでした。最終的にそれを機能させる方法は、次のトリックを使用することです:絶対に配置された要素を div の中央に配置する方法は?

次に、投稿に見られるように、すべての要素をラッパー内に絶対に配置し、サブ要素を相対的に配置します

于 2012-05-04T20:55:39.700 に答える
0

いくつかのサンプル コードを提供していただければ、より適切なサポートを提供できます。それまでの間、次のコードで探しているものを処理する必要があります。

HTML

<div id="wrapper">
    <div id="title"><h2>Article Headline</h2></div>
    <div id="image"><img></div>
    <div id="leftbutton"><img></div>
    <div id="rightbutton"><img></div>
</div>​

CSS

​#wrapper {
    background:#6cb6d9;
    display:inline-block;
    position:relative;} 

#title {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;}

#title h2 {
    background:green;
    color:white;
    padding:10px 15px 10px 15px;
    display:inline-block;
    max-width:200px}

#image {}

#image img {
    min-width:200px;
    height:300px;
    width:500px; }

#leftbutton {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:75px;
    background:black;}

#rightbutton {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:75px;
    background:black;}

ただし、img サイズをハードコーディングする代わりに、CSS のこれらの行を削除するだけで、div が img のデフォルト サイズに自動的に調整されます。

http://jsfiddle.net/b7c7c/

于 2012-05-04T19:24:57.833 に答える