Question

我希望你们都能帮忙:)。

我的网站上有一个侧边栏，但因为我不希望它在折叠下我想将这个十里边栏分成两个5 li侧边栏，其中一个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>

Answer 1

放轻松..使用

-webkit-column-count: 2;

这会将您的内容分成两列。或者如果您想分别在两侧显示侧边栏，则使用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;
}

试试这段代码。这可能会澄清您的问题。

Answer 2

您只需删除以下代码中注释的标记：

<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>

将侧边栏分成两部分

2 个答案: