0

フッターに垂直の仕切りを設定しようとしていますが、順序付けされていないリストの要素と重なるため問題があります。ウィンドウのサイズと順序付けられていないリストの位置に応じて、重なり合うことなく移動するようにするにはどうすればよいですか。

CSS

 html, body {
    height: 70%;
}
#wrap {
    min-height: 70%;
}
#main {
    overflow: auto;
    padding-bottom: 140px;
}
#footer {
    position: relative;
    height: 140px;
    margin-left: -20px;
    margin-right: -20px;
    opacity: 0.8;
    clear: both;
    background: #545454;
}
#footer-inner {
    padding-left: 300px;
}
#divider {
    border-left: 1px solid #0099CC;
    height: 100px;
    position: absolute;
    right: 500px;
    top: 10px;
    margin: 0 auto;
    float: center;
}




 </style>

html

 <div id="wrap">
    <div id="main">
    </div>
 </div>

 <div id="footer">
<div id = "divider">
</div>

 <div id = "footer-inner">
     <ul>
     <li> Info </li>
     </ul>

 </div>
4

3 に答える 3

0

CSS 

html, body {height: 70%;}
#wrap {min-height: 70%;}
#main {overflow:auto; padding-bottom: 140px;}  

#footer {

position: relative;
height: auto;
margin-left: -20px;
margin-right: -20px;
opacity: 0.8;
clear:both;
background: #545454; 
padding: 15px;
}

#footer-inner
{
    Padding:10px 25px;
    border-right:1px solid #fff;
    float:left;
}

#divider
{
clear:both;
}
 </style>
</head>
<body>

html

 <div id="wrap">
    <div id="main">
    </div>
 </div>

 <div id="footer">

 <div id = "footer-inner">
     <ul>
     <li> Info </li>
    <li>ABC</li>
    <li>123</li>
     </ul>


 </div>
<div id = "divider">
</div>
</div>
</body>
</html>
于 2013-09-28T07:07:44.040 に答える
0

必要な数の列を追加します ここにフィドルがあります

フィドル

そして変更されたcss

html, body {height: 70%;}

#wrap {min-height: 70%;}

#main {overflow:auto;
    padding-bottom: 140px;}  

#footer {position: relative;
 white-space:nowrap;
    height: 140px;
    width:inherit;
    margin-left: -20px;
    margin-right: -20px;
    opacity: 0.8;
    background: #545454; 
    overflow:hidden;
}

.footer-inner{
    width:auto;
    float:left;
    display:block;
}

#divider {
    border-left:1px solid #0099CC; 
    height:100px;
    position:relative;
    top:10px; 
    margin: 0 auto;
    float: left; 
    width:10px;
}

すべてにフロートを左に追加し、親に関してフッターの幅を追加しました。

于 2013-09-28T07:21:39.227 に答える