分割栏分成两个

我希望大家都可以帮助:)分割栏分成两个

我有一个侧边栏在我的网站，但因为我不希望它会折下我想这十里侧边栏一分为二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

分割栏分成两个

回答

相关问题