22

私はcssを初めて使用し、画像をdiv要素内で水平方向に整列させようとしています。

float and display：inlineを試しましたが、それでも垂直方向に整列しています。

#maincontainer {
   left : 50px;
 top : 80px;
 width : 300px;
 height : 100px;
 border : solid 2px #0f0f0f;
 position : absolute;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :relative; 
    float : left; 
   }

私がどこか間違っているかどうか助けて教えてください。

4

6 に答える 6

8

水平に配置された
html

<div id="maincontainer">
    <img />
</div>

CSS

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     }
     #maincontainer img {
        width : 80px;
        height : 80px;
        margin:0 auto;
        display:block;
        background:red;
    }​

垂直および水平に配置された
html

 <div id="maincontainer">
        <div><img /></div>
    </div> ​

CSS

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     display:table;
     }
     #maincontainer div img {
        width : 80px;
        height : 80px;
        background:red;
        display:inline-block;
    }
    #maincontainer div{
     display:table-cell;
       text-align: center;
        vertical-align: middle;
    }​

画像から background:red を削除するだけです

于 2012-11-20T11:15:02.833 に答える
4

親コンテナーが画像に対して十分な幅を持っている限り、画像は自然に並んで配置されます。画像の行がコンテナーに対して幅が広すぎると、画像は新しいテキスト行に折り返され始めます。

また、空白 (スペース、タブ、および改行文字) は、2 つの画像間のテキスト スペースとしてレンダリングされます。IMGこれを防ぐには、タグの間に空白文字がないようにしてください。

white-space: nowrap;親要素に CSS を設定することで、イメージを強制的に親コンテナーの幅からオーバーフローさせることができます。これは、コンテナが狭すぎる場合に望ましくない効果を引き起こす可能性がありますが、コンテナoverflow: auto;要素に追加することで水平スクロールバーを作成するためにも使用できます。

最後に、イメージ タグはvertical-alignCSS プロパティを持つことができます。デフォルトでは ですvertical-align: baseline;。これにより、画像の下に数ピクセルの空白が作成されます。vertical-align: top;CSS で画像を設定することで、これに対抗できます。

写真付きの例については、このフィドルを参照してください。

于 2012-11-20T08:17:39.540 に答える
1

div の幅がすべての画像を 1 行に収めるのに十分な場合は、次のように簡単に試すことができます。

#maincontainer img {
float:left;
margin-right:10px;
}

ライブでご覧ください: http://tinkerbin.com/mIBcXNcS これが基本的なコードですが、HTML コードによって異なる場合があります....

于 2012-11-20T07:52:22.207 に答える
0

こんにちは、これに従ってあなたの位置に変更してください

親の位置を定義relativeし、子に与えるabsolute 

#maincontainer {
 position : relative;
 }

 #maincontainer img {
    position :absolute; 
   }

-----

私はあなたがこれをしたいと思う

今あなたのいくつかpropertiesを変更しますcss

親にorを追加しmargin-topてmargin-left 削除 しますtopleft id maincontainer

このように 

#maincontainer {
 width : 300px;
 height : 100px;
  margin-top:80px;
  margin-left:50px;
 border : solid 2px #0f0f0f;
 position : relative;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :absolute; 
  vertical-align:top;
   }

ライブデモ

于 2012-11-20T07:14:14.530 に答える
0
  1. display:block;フロートを機能させるには、IMG 要素に適用する必要があります。インライン要素はフローティングできません。
  2. または、IMG を として定義しますdisplay:inline-block;が、これは古いブラウザーではサポートされていないことに注意してください。
  3. 補足として、CSS で高さを定義することはできる限り避けてください (または min-height を使用してください)。幅とは異なり、多くの要素、特にメイン コンテナーの高さは柔軟にする必要があります。
于 2012-11-21T20:05:00.313 に答える