2012-06-12 56 views
2

正在爲此掙扎。一切似乎都沒問題,但我無法將內容置於<div id="contacts"><div class="contacts2">部分中。無法將div放在其他div標記中

我錯過了一些東西,並盯着它太久拿起它。希望這裏有人能夠發現我的問題。


http://jsfiddle.net/mpAy2/

下面的代碼:

<!--Start content wrapper--> 
<div id="content"> 
<div id="contact_wrapper"> 

    <!--**************Glenn and Cathy*****************--> 
    <div id="contacts"> 
     <p class="text6">Administrative Staff</p><br /><br /> 

    <div class="admin_list_img"> 
      <img src="../images/staff_students/glenn.jpg" alt="Image of Dr. Glenn Wilson" /> 
     </div> 
     <div class="admin_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/tech/glenn-wilson-0">Dr&#46; Glenn Wilson</a></span> <br/>Associate Professor of Technology&#44; Senior Research Scientist<br/><br/> 
      Office&#58; 178 Science Building <br />Phone&#58; &#40;207&#41;780&#45;8045<br />Email&#58 <a href="mailto:[email protected]"> gwilson&#64;usm&#46;maine&#46;edu</a></div> 

     <div class="admin_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="image of Cathy Virecci-Fana" /> 
     </div> 
     <div class="admin_list"> 
      <span class="text12b">Cathy Virecci&#45;Fana</span> <br/>Grants&#44; Contracts and Projects Coordinator<br/><br/> 
      Phone&#58; &#40;207&#41;780&#45;4782<br />Email&#58 <a href="mailto:[email protected]">cfana&#64;usm&#46;maine&#46;edu</a></span> 
     </div> 
    </div> 

    <!--**************Clare Congdon and Bruce Macloed*****************--> 
    <div class="contacts2"> 
     <p class="text6">Principle Investigators</p><br /><br /> 

     <div class="pi_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/cos/clare-bates-congdon">Dr&#46; Clare Congdon</a></span> <br/>Associate Professor of Computer Science<br /><br/> 
      Office&#58; 228 Science Building <br />Phone&#58; &#40;207&#41;228&#45;8441<br />Email&#58 <a href="mailto:[email protected]">congdon&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 

     <div class="pi_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/cos/bruce-macleod">Dr&#46; Bruce MacLeod</a></span> <br/>Associate Professor of Computer Science<br/><br/> 
      Office&#58; 222 Science Building<br />Phone&#58; &#40;207&#41;780&#45;4285<br />Email&#58 <a href="mailto:[email protected]">macleod&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 
    </div> 

    <!--**************David Briggs and Carl Blue *****************--> 
    <div class="contacts2"> 
     <div class="pi_list_img"> 
       <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/cos/david-briggs">Dr&#46; David Briggs</a></span> <br/>Associate Professor of Computer Science<br /><br/> 
      Office&#58; 220 Science Building <br />Phone&#58; &#40;207&#41;780&#45;4723<br />Email&#58 <a href="mailto:[email protected]">briggs&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 

     <div class="pi_list_img"> 
      <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
      <span class="text12b"><a href="http://www.usm.maine.edu/tech/carl-blue">Dr&#46; Carl Blue</a></span> <br/>Associate Professor of Computer Science<br/><br/> 
      Office&#58; Room 210 John Mitchell Center<br />Phone&#58; &#40;207&#41;780&#45;5391<br />Email&#58 <a href="mailto:[email protected]">cblue&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 
    </div> 

    <!--**************David Bantz *****************--> 
    <div class="contacts2"> 
     <div class="pi_list_img"> 
       <img src="../images/staff_students/default3.jpg" alt="default image" /> 
     </div> 
     <div class="pi_list"> 
       <span class="text12b"><a href="http://www.usm.maine.edu/cos/david-bantz">Dr&#46; David Bantz</a></span> <br/>Adjunct Professor<br /><br/> 
      Office&#58; 226 Science Building <br />Phone&#58; &#40;207&#41;780&#45;8440<br />Email&#58 <a href="mailto:[email protected]">bantz&#64;usm&#46;maine&#46;edu</a></p> 
     </div> 
    </div> 
</div> 
</div> 
______________________ 

#content{ 
    width:100%; 
    max-width: 1000px; 
    height:100%; 
    padding: 0px; 
    margin-top: 0px; 
    margin-bottom: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align:center; 
    background-color:#fff; 
    border-top: 0px; 
    position:relative; 
    z-index:1px; 
} 

#contact_wrapper{ 
    width: 100%; 
    min-width: 900px; 
    height: 350px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #333; 
    text-align: center; 
} 

#contacts { 
    height:250px; 
    width:100%; 
    min-width: 870px; 
    font-family: arial,serif,Capitals,serif; 
    font-size: 18px; 
    margin-top: 25px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    text-align: center; 
    top: 70px; 
    background-color: #fff; 
    border-bottom: solid 1px; 
    border-top: solid 1px; 
} 

.text6 { 
    font-size: 18px; 
    font-family:arial,serif,Capitals,serif; 
    font-weight:0; 
    color: #000; 
    text-align: left; 
    margin-bottom: 0px; 
    padding-bottom: 0px; 
} 

.admin_list{ 
    position: relative; 
    text-align:left; 
    font-size: 12px; 
    float: left; 
    width:23%; 
    height:150px; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 0px; 
    vertical-align: middle; 
} 

.admin_list_img{ 
    position: relative; 
    text-align:center; 
    float: left; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 20px; 
    vertical-align: middle; 
} 

.contacts2 { 
    height:200px; 
    width:100%; 
    min-width: 870px; 
    font-family: arial,serif,Capitals,serif; 
    font-size: 18px; 
    margin-top: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    text-align: center; 
    top: 70px; 
    background-color: #fff; 
    border-bottom: 0px; 
    border-top: 0px; 
} 

.pi_list{ 
    position: relative; 
    text-align:left; 
    font-size: 12px; 
    float: left; 
    width:23%; 
    height:150px; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 0px; 
    vertical-align: middle; 
} 

.pi_list_img{ 
    position: relative; 
    text-align:center; 
    float: left; 
    background-color:#fff; 
    padding:0px; 
    margin: 0px 20px 0px 30px; 
    vertical-align: middle; 
} 
+1

你可以添加一些換行符在這裏和那裏,使代碼更易讀?目前這是一大塊可怕的文字。 – jakee

+0

你想要居中什麼? – LukeP

+1

哦,JSFiddle:http://jsfiddle.net/mpAy2/ – LukeP

回答