web-dev-qa-db-ja.com

div間の不要な垂直方向の間隔を削除する方法

Webサイトのフロントエンドを開発しているときに、ちょっとした問題に遭遇しました。私はCSSに長けていますが、素晴らしいとは言えません。とにかく、私はjsFiddle here を作成して、問題を説明しています。

私のWebサイトの各ページのコンテンツセクションの上部に、バナー画像があります。このバナーをコンテンツから分離する2色の仕切りを配置したいと思います。 （私のデザイナーがくれたモックアップに示されているように、 https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg ）

画像を取り込むだけでなく、純粋なCSS + HTMLでこれを実行したいと思います。とにかく、次のコードを使用してそうしました。

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;">
<div>
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div>
</div>

（インラインCSSは許してください。これは単なるデモンストレーションの目的です。また、残念ながら、2番目のdivを改行に入れてインデントすると、空白が作成されます）

私が抱えている問題は、ディバイダーとイメージの間に大きなギャップがあることです。私はすべての関連要素にmargin：0pxとpadding：0pxを追加しようとしましたが、空白はまだ残っています。

誰かが私を助けてくれませんか？

ありがとう、YM

cssvertical-alignment
11
Joshua Walsh

私にとっては、垂直方向の配置の問題です。あなたが試すことができます

.banner {
    display: block;
    width: 100%;
}
div {
    height: 10px;
    vertical-align: top;
}

そうすれば、負のマージンを使用する必要がなくなります（これは間違っていません。

ご覧ください こちら

17
Chad

これは実際にはフロートの問題です

    <img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg">
<div style="">
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div>
</div>

cSS

.banner {
    width:100%;
float:left;
}

http://jsfiddle.net/eLbUU/4/

4
Hushme

位置を相対的にしてから、トップを何かマイナスに設定できます。例：

 position: relative;
 top:-10px;
 left:0px;
3
Daniel

表示ブロックを使用してdivをフローティングし、img自体がオーバーフローを非表示にした表示ブロックであることを確認するimgにストライプを引き締めることができました： fiddle

.banner {
    width:100%;
    display: block;
    overflow: hidden;
}
div div{
    float: left;
}
2
Parker Hutchinson

まず、暗い茶色を明るい茶色のdivに入れます。そうすることで、ウィンドウのサイズが変更されても、サイズ変更のパーセンテージや間隔が損なわれることはありません。

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>

また、スペースがあれば、他の人が述べたように、負のマージンまたはフロートを使用できます。

.banner {
    width:100%;
    /* margin-bottom to the banner is negative which moves the div upward */
    margin-bottom: -10px;
}

ここでフィドル

1
kmkmkm

ディスプレイを置く：ブロック;画像クラスとfloat：left;他のすべての要素のために役立つかもしれません。

.banner {
    width:100%;
    display:block;
    float:left;
}

http://jsfiddle.net/bjliu/eLbUU/7/ （編集：間違ったリンクになりました）

1
bjliu