1

私は次のようなhtmlを持っています：

<div class="content-wrapper">
            <div class="float-left">
                <img alt="Track System" src="Images/myimage.png" />
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li class="tab"><a runat="server" href="~/">Home</a></li>
                        <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                        <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                        <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                    </ul>
                </nav>
            </div>
        </div>

最初の div (浮動小数点の左) は、ある程度の長さの画像です... 2 番目の div (浮動小数点の右) は、下に揃えたいタブです。現在、彼らは高すぎます...

CSS クラスは次のとおりです。

.float-left{
float:left;
}

.float-right{
float:right;
}

絶対配置と相対配置に変更してみましたが、役に立ちませんでした... ここに画像の説明を入力

ロゴは左側に正しく表示されていますが、右側のタブは浮いているように見えます...それらを下に揃えたいと思います。

4

2 に答える 2

1

これは、あなたの望むことですか？http://jsfiddle.net/86Pr2/4/

「クリア」のクラスと次の CSS を含む div を追加しました (すべてのコードに目を通したくなかったので、それらすべてに !important を追加しました。)

.float-right {
position:absolute !important;
bottom:0 !important;
right:0 !important;
}
.content-wrapper {
   position:Relative !important;
}
.clear {
    clear:both !important;
}

そして、変更された HTML:

<div class="content-wrapper">
        <div class="float-left">
            <img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
        </div>
        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li class="tab"><a runat="server" href="~/">Home</a></li>
                    <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                    <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                    <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                </ul>
            </nav>
        </div>    
<div class="clear"><!--This makes the wrapper have a height--></div>

    </div>
    <div id="body">
    <section class="content-wrapper main-content clear-fix">
        hi
        </section>
    </div>
于 2013-10-02T18:09:48.260 に答える