0
  • ページ全体に広がるトップ ナビゲーションがあります
  • その上部のナビゲーション内には、さまざまな要素があります
    • 左揃えにする必要がある 2 つ
    • 右揃えにする必要があるもの
  • ナビゲーションは流動的で、要素は固定幅です
  • ブラウザ ウィンドウが最小化されているときに要素が折り返されないようにする
  • 中国の視聴者が多いため、IE6 で作業する必要があります。

ここで例を参照してください: http://jsfiddle.net/4SUwg/

<div id="header">
  <div id="headerContent">
    <div class="search-list"> Search List </div>
    <div class="social-buttons"> Social </div>
    <div class="signin"> Login Drop Down </div>
  </div>
</div>

nav 内の div 要素がラップしないようにします。スタックを検索したところ、近い答えを見つけることができましたが、問題を完全に解決するものは何もありませんでした。div 要素を右揃えにする必要があると、問題が複雑になります。すべてのブラウザ、特に IE で動作する必要があります。

事前にご協力いただきありがとうございます!!!

4

3 に答える 3

0

流動的なレイアウトが必要ですが、流動的なレイアウトの最も重要なルールは、要素の明確な幅を設定することではなく、幅を設定したことです。

CSSに<style>は必須ではないタグがあります。おそらく、誤ってタグを付けた可能性があります。

headerContent内のdivの幅をパーセンテージ値で設定しました。CSSは

body {
margin:0;
padding:0;
}

#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden; 
}

#headerContent {
height: 32px;
border:1px dashed #fff;
}

.search-list { 
width:28%; 
float:left;
background:#039;
}

.social-buttons { 
width:28%; 
float:left;
background:#060;
}

.signin { 
width:28%; 
float:right;
background:#F00; 
}

幅の値を変更しただけで、私のブラウザでは以前のバージョンよりも見栄えが良くなりました。これがフィドルですhttp://jsfiddle.net/DeepakKamat/s52Hn/8/

于 2012-11-14T04:41:37.237 に答える
0

このプロジェクトの要件だったので、すべてのブラウザー、特に IE6 で動作するソリューションを見つけました。同じことを達成するより良いものがあれば、投稿してください！回答/助けてくれたすべての人に心から感謝します。

<div id="header2">
    <table id="headerContent2">
        <tr>
            <td id="left" valign="top">
                <div id="leftWrapper">
                <div class="search-list2">Search List</div>
                <div class="social-buttons2">Social Buttons</div>
                </div>
            </td>
            <td id="middle">&nbsp;</td>
            <td id="right" valign="top">
                <div class="signin2">Login Drop Down</div>
            </td>
        </tr>
    </table>
</div>


<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}

#headerContent2 {
width:100%;
}

#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}

.search-list2 { 
width:150px; 
float:left;
background:#039;
}

.social-buttons2 { 
width:200px; 
float:left;
background:#060;
}

.signin2 { 
background:#F00;
float:right;
width:400px;
}

#leftWrapper {
width:400px;    
}

#middle {
width:100%;
}
</style>

ここで動作するデモを参照してください。JSfiddle はすべての IE で機能するとは限らないため、コードをコピーしてすべての IE で試してください。 http://jsfiddle.net/GtXKE/

于 2012-11-14T19:49:53.080 に答える
0

SPAN を使用してください .. INLINE であり、BLOCK ではありません ??

<div id="header">
  <div id="headerContent">
     <span class="search-list"> Search List </span>
     <span class="social-buttons"> Social </span>
     <span class="signin"> Login Drop Down </span>
  </div>
</div>

そしてあなたのCSS、フロートを削除します

<style>
body {
margin:0;
padding:0;
}

#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}

#headerContent {
height: 32px;
border:1px dashed #fff;
}

.search-list {
width:150px;

background:#039;
}

.social-buttons {
width:150px;

background:#060;
}

.signin {
width:200px;

background:#F00;
}
于 2012-11-14T01:34:30.153 に答える