分割欄分成兩個

我希望大家都可以幫助:)分割欄分成兩個

我有一個側邊欄在我的網站，但因爲我不希望它會折下我想這十里側邊欄一分爲二5裏邊與他們之間的div顯示使用Jquery的內容。我已經編寫了網站，所以它看起來不錯，但我需要側邊欄作爲一個菜單而不是兩個，所以一次只能做一個選擇，一個當前的課程等。任何人都知道如何做到這一點？我加價如下：

<div id="sidebar"> 
<ul class="list2"><em> 
    <li class="current1"><a href="#tab1">Bilgorajski</a></li> 
    <li><a href="#tab2">Rzeszowski</a></li> 
    <li><a href="#tab3">Kasuby</a></li> 
    <li><a href="#tab4">Mazur</a></li> 
    <li><a href="#tab5">Lubelski</a></li> 
    </em> 
</ul> 
</div> 

<div id="repcontent"> 

</div> 


<div id="sidebar"> 
<ul class="list2"><em> 
    <li><a href="#tab6">Powislainski</a></li> 
    <li><a href="#tab7">Podhalainski</a></li> 
    <li><a href="#tab8">Kujuwiak Oberek</a></li> 
    <li><a href="#tab9">Krakowiak</a></li> 
    <li><a href="#tab10">Szlansk</a></li> 
    </em> 
</ul> 
</div>

來源

2013-01-13 user1931898

你標記錯誤：您不應該在文檔中多次使用相同的id值。您已經使用了id =「sidebar」兩次。 – SaidbakR

我對網頁設計相當陌生，並且希望它能夠提供相同的菜單，但它不起作用。你會怎麼做？ – user1931898

你有一個'em'中包含'li'，這也是無效的。如果因爲一些古老的觀點（即用戶不會滾動查看虛擬摺疊下的內容）而分裂了您的元素，則會出於錯誤的原因進行操作，因爲用戶*將*滾動。分解菜單是因爲它有意義的內容明智，而不是因爲一些可用性概念在10年前被證明是有缺陷的。 – cimmanon

處之泰然..使用

-webkit-column-count: 2;

這將您的內容分爲兩個columns..Or如果你想在兩側分別顯示側邊欄然後使用2個獨立的部門和float：left | right;財產。或者你可以使用JQuery來查詢。

<body> 
    <div class="container"> 
<div class="sidebar1"> 
<ul class="nav"> 
    <li><a href="#">Link one</a></li> 
    <li><a href="#">Link two</a></li> 
    <li><a href="#">Link three</a></li> 
    <li><a href="#">Link four</a></li> 
</ul> 
<p> </p> 
<!-- end .sidebar1 --></div> 
<div class="content"> 

<!-- end .content --></div> 
<div class="sidebar2"> 
<!-- end .sidebar2 --></div> 
<!-- end .container --></div> 
</body>

CSS

.sidebar1 { 
float: left; 
width: 20%; 
background-color: #93A5C4; 
padding-bottom: 10px; 
    } 
.content { 
padding: 10px 0; 
width: 60%; 
float: left; 
} 
.sidebar2 { 
float: left; 
width: 20%; 
background-color: #93A5C4; 
padding: 10px 0; 
}

試試這個代碼。這可能會澄清你的問題。

來源

2013-01-13 12:19:23 ajay

謝謝你的回答，但我完全不理解它。我把它放在#sidebar Css中，但是我不明白的是「如果你想分別在兩側顯示側邊欄，然後使用2個獨立的分區並且float：left | right; property」，請您進一步詳細說明一下。再次感謝。 – user1931898

我編輯我的答案去通過答案.. – ajay

你只需要刪除評論下面的代碼標籤：

<div id="sidebar"> 
<ul class="list2"><em> 
    <li class="current1"><a href="#tab1">Bilgorajski</a></li> 
    <li><a href="#tab2">Rzeszowski</a></li> 
    <li><a href="#tab3">Kasuby</a></li> 
    <li><a href="#tab4">Mazur</a></li> 
    <li><a href="#tab5">Lubelski</a></li> 
    </em> 
</ul> 
<!-- </div> --> 

<div id="repcontent"> 

</div> 


<!-- <div id="sidebar"> --> 
<ul class="list2"><em> 
    <li><a href="#tab6">Powislainski</a></li> 
    <li><a href="#tab7">Podhalainski</a></li> 
    <li><a href="#tab8">Kujuwiak Oberek</a></li> 
    <li><a href="#tab9">Krakowiak</a></li> 
    <li><a href="#tab10">Szlansk</a></li> 
    </em> 
</ul> 
</div>

編輯：拿到三列布局，我將使用zurb-foundation CSS框架如下：

<body> 
<div id="header" class="row"> 
<div class="twelve columns"> 
Header 
</div> 
</div> 
<div class="row"> 
<div id="left-sidebar" class="three columns"> 
    <ul class="list2"><em> 
    <li class="current1"><a href="#tab1">Bilgorajski</a></li> 
    <li><a href="#tab2">Rzeszowski</a></li> 
    <li><a href="#tab3">Kasuby</a></li> 
    <li><a href="#tab4">Mazur</a></li> 
    <li><a href="#tab5">Lubelski</a></li> 
    </em> 
    </ul> 
    </div> 
<div id="repcontent" class="six columns"> 
    Middle contents 
</div> 
<div id="right-sidebar" class="three columns"> 
<ul class="list2"><em> 
    <li><a href="#tab6">Powislainski</a></li> 
    <li><a href="#tab7">Podhalainski</a></li> 
    <li><a href="#tab8">Kujuwiak Oberek</a></li> 
    <li><a href="#tab9">Krakowiak</a></li> 
    <li><a href="#tab10">Szlansk</a></li> 
    </em> 
    </ul> 

</div> 
</div> 
</body>

來源

2013-01-13 12:46:32 SaidbakR

謝謝你的答案，但是當我這樣做時，我在一列中得到一切。我所追求的是前五項左轉，第二項五項是右轉，「再轉讓」是中間轉移。你會如何做到這一點？ – user1931898

所以你想要三列布局。那麼有很多方法可以獲得三列布局，您可以在Google中搜索「三列CSS佈局」或查看使用[tag：zurb-foundation] css框架的答案的編輯。 – SaidbakR

分割欄分成兩個

回答

相關問題