0

同じ高さのコンテナdivと2つのdivがあります。#Sidebar divは左側にあり、＃Contentdivは右側にある必要があります

サイドバーに何かを追加すると、コンテンツDivが押し下げられ、困惑します。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>

<style type ="text/css">
li
{
display:inline;

background-color: #c5e8cf;
}

a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}

a.side { border-bottom: 2px solid black;
    background-color: #e3e7ec;
    }
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
        display:inline-block;
        font-size: 20px;
        background-color: #e3e7ec;
        border-bottom: 2px solid black;
        padding-bottom: 20px;
        }
label.side:hover { background-color: #dde504;}

div#header {
    position: float;
    background-image: url("../images/header.jpg");
    background-repeat: no-repeat;
    border-bottom: solid 1px #999999;
    height: 97px;
           Width: 1000px;
        margin-left: 114px;
        margin-top: 10px;
        background-size: 100%;
}

div#menu { 
position: float;    
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
      margin-left: 115px;
padding-top:5px;

background-color: #e3f6ea;
}
#menu-content { 
margin: auto;
width:100%;
background-color: #c5e8cf;

}

div#container{

border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}

div#sidebar { 
    position: relative;
border:2px solid #999999;
Width: 131px;

padding-bottom: 1000px;
margin-bottom: -1000px;

background-color: #c5cfd9;
overflow: hidden;
}

div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}

div#footer { position: relative;
        border: solid 2px #999999;

        width: 996px;
        height: 50px;
        background-color: #FFFFFF;
        margin-left: 115px;
}

#body { background-color: #6b86a3;}


</style>

</head>

<body id = "body" >

<div id="header"> </div>
<div id = "menu"> 


<div id="menu-content">
<ul>
      <li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>


      <li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>

  </li>
      <li><a class="menu" href="../images/header.jpg">View Applicants</a></li>

  </ul>
</div>
</div>
  <div id="container" >
    <div id="sidebar"> 
    <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
       <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
    </div>
    <div id="content">



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

</body>
</html>

cssは少し新しいです。ありがとうございました

4

3 に答える 3

0

デモフィドル

float: top;間違っている;

floatleftまたはのみにすることができますright;

float:right;サイドバーとfloat:left;コンテナに追加します

 div#sidebar { 
        position: relative;
    border:2px solid #999999;
    Width: 131px;

    padding-bottom: 1000px;
    margin-bottom: -1000px;

    background-color: #c5cfd9;
    overflow: hidden;


    float:right;


    }

    div#content {
    position: relative;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-left: solid 1px #999999;
    top: -65px;
    left: 132px;
    background-color: #f6f4f4;

    float:left;

    }

Cssを学ぶ

于 2013-03-18T19:22:11.920 に答える
0

これは、達成したいことのより一般的なものです。

CSS

#container {
    border: solid 1px #999999;
    border-top: none;
    width: 998px;
    margin-top: 3px;
    margin-left: 115px;
}

#sidebar {
    float: left;
    width: 131px;
    border: 2px solid #999999;
}

#content {
    float: left;
    width: 131px;
    border-left: 1px solid #999999;
}

.floatClear {
    clear: both;
}

HTML

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Text
            </div>
            <div id="content">
                Text
            </div>
            <div class="floatClear"></div>
        </div>
    </body>
</html>

ここで実際に行われるのは、2つ<div>の左フローティングを並べ、aを使用して-typeが改行に折り返さfloat: clear;れることを除外することです。両方の幅（パディング/マージン/ボーダー（左/右）を含む）がそれよりも大きい場合にのみ、それらは互いにラップします。block<div>#containerwidth

CSSにさらに追加することで、 divと一緒にCSSを含めるスペースがある限りmargin-left、 CSSを好きな場所に配置できます。#content#sidebar

リトルエクストラ

パディング/ボーダーによって幅がさらに広くなるという従来のスタイルを回避するには、CSSスタイルシートで指定したボックスよりもボックスを大きくする代わりに、すべてのパディングとボーダー幅が内側にプッシュされる<div>新しい機能を使用できます。 box-sizing：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;
于 2013-03-18T19:24:12.313 に答える
0

max-heightCSSプロパティがその役割を果たします。

#Sidebarと#Contentの両方の最大高さを同じ値に設定します。

overflow:scrollそして、それらのいずれかが最大高さよりも高くなることを期待している場合は、を追加できます。

于 2013-03-18T19:34:27.283 に答える