DIV要素を下に配置する方法および他のDIVに左寄せ

StackOverflow https://stackoverflow.com//questions/20011918

質問

私のセットアップはこれです - 私はASP.NET MVC 4に取り組んでいます。ユーザーインターフェースのために、そして特にこの質問のために、私は_Layoutのためにそれをやっているので、すべてのページに対して共有される非常に基本的なセットアップです。私は私がbootstrap 3を使用できる場所を使用していますが、サイトは大きなディスプレイデバイスだけをターゲットにしているので、多くのものが他のツールで行われます。

しかし基本的なレイアウトのために私はbootstrap 3スタイルの要素を使用していますが、それらはすでにカスタマイズされているので、これは特定のFramework / libをアドレス指定するよりも一般的なCSS / JS関連の質問であると思います。私はこれが私の問題のための最善の解決策を得ることができるようにここにそれを置くだけです：

基本レイアウトの一部

さまざまな色は理解しやすくするためだけで、私が経験があまりないので、私が達成したいことを説明するのが簡単になるでしょう。 <div id="top-nav-wrapper">は、他の3つのDIVを保持し、背景画像を提供し、レイアウトが一般的な解像度で一般的な解像度に固定されているため、このストライプが両端に起こります。このラッパーDIVのスタイルはかなり簡単です：

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
}
.

970px DIV Inide Inirs Insign Ine Live Tagsは3つあります。 1つ目は、濃い青の背景 - #top-nav-wrapperを持つものです。ここでは<div class="container">クラスbootstrap 3を使用しますが、カスタマイズされていて、スタイルは次のとおりです。

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.

このDIVの後、ナビゲーションボタンと濃い黄色の背景を持つ他のものに続く - 

<div class="container" style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important;">
.

もう一度.containerクラスを使用して表示できる追加のスタイリングを使用しています。

最後のDIVは灰色の行です - .container、そして再び、いくつかの変更を加えて事前定義された<div class="container" style="background-color: grey; height: 50px;">クラスを使用します。

画像の赤境界ボックスは、今追加したいものを表します。垂直メニューが必要ですが、デザインでは垂直メニューが濃い黄色のDIVの下にあることを必要とします。 .containerメニューリンクは青に着色されているわけではありません。左側がDIVの左端であるので、私が必要なものは常に黄色のDIVの下に垂直メニューがどのようにサイズ変更されているかを左下に並んでいるように変更することができません。それをより明確にするために私はそれがどのように見えるべきかのイメージを投稿します：

左揃えdiv

だから私が望む最初のことは、その方法がわからないことはDIVを配置することですので、メニューDIVの下にあると左揃えになります。 2つ目は、上の画像に表示されるように、灰色のDIV上に表示されるメニューが必要です。完了するためだけに - アイデアは垂直メニューのために常にHomeメニューリンクの幅を持つことです。しかし、私は少しHomeでこれを手に入れたので、私の質問は私がそれを望んでいる方法を完全に配置する方法について完全にありますか？

役に立ちましたか？

解決

私が正しく理解した場合、970pxコンテナはライトブルーホームリンクの左境界から始まり、右側の「オフスクリーン」を続けます。私が間違っているなら私を修正してください。

その場合、私はそれを中心にするために自動マージンを備えた単一のコンテナ970px幅を幅広く設定してから他のコンテナを内側に配置します。赤い箱が970倍幅のコンテナの内側にある場合は、グレーボックスの高さを知っているので、赤いボックスmargin-top: -50px

をスタイルすることもできます。

これはいくつかのコードです、そしてあなたはこれを見ることができます jsfiddle 。

HTML：

<div id="top-nav-wrapper">
    <div class="container">
        <div style="height: 50px; background: #006"></div>
        <div style="height: 80px; padding-right: 0px
!important; padding-left: 0px !important; background: #eb0;"></div>
        <div style="background-color: grey; height: 50px;"></div>
    </div>
</div>
<div id="main-wrapper">
    <div class="container">
        <div style="background: red; width: 200px; height: 400px; margin-top: -50px"></div>
    </div>
</div>
.

CSS：

#top-nav-wrapper {
    background-image:url('/Content/images/navbar-stripe.png');
    background-repeat:repeat-x;
    width: 100%;
}

.container {
  max-width: none !important;
  width: 970px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container div {
    width: 100%;
}
.
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top