0

私はデザインに不慣れで、2つのimgを並べて配置する必要があります。これは現在私のサイトがどのように見えるかです：カットオフについて心配しないでください、それはそのようであると思われます。後でレスポンシブ要素を追加できるようにこれを準備する必要があります。これにより、絶対位置など、画像を所定の位置に固定するものを使用できなくなります。

これは現在私のサイトがどのように見えるかです

両方の画像は125ピクセルで同じ高さです。両方の画像を左または右にフロートさせると、Webページの端で画像が95％カットされて表示されます。なぜそれが互いに下に置かれているのか理解できません。2番目の画像が同じレベルにあるための十分な余地があるようです。

これまでのところ、「navi」は私のコンテナまたはラッパーです...以前は実験を行っていましたが、現在はそれぞれの下にコードがありませんmainlogo。slidertop

<div id="navi">
<div id="mainlogo"><header><a href="#"></a></header></div>
<div id="slidertop"><header id="topad"><a href="#"></a></header></div>
<div style="clear:both"></div>
</div>

#navi{
height: 130px;
}
#mainlogo{
}
#slidertop{
}

これは私が私の画像を呼び出す方法です：

header{
background: url(../Images/logo1.gif) no-repeat 15% 0px;
border: none;
height: 125px;
top:100px;
}
header#topad{
background: url(../Images/TopAd.gif) no-repeat 80% 0px;
border: none;
height: 125px;
vertical-align: middle;
}
4

2 に答える 2

0

divをフローティングしてみましたか？

#mainlogo{
    float: left;
}
#slidertop{
    float: left;
}
于 2013-02-07T23:05:52.843 に答える
0

あなたが投稿した元のコードでは、div はすべて利用可能な幅の 100% であり、ページ上で互いの上に表示されると思います。各 div の周りに色付きの境界線を一時的に追加して、それらがどこにあるかを確認できるようにすると、これを自分で確認できます。

それらを並べて表示したい場合は、これを実現するためにスタイルを追加する必要があります。たとえば、フロートして幅を指定できます。

header { width: 45%; float: left; }
header#topad { float: right;}

例: http://codepen.io/anon/pen/ynuoa

于 2013-02-07T23:53:07.310 に答える