2012-06-28 38 views
0

我試圖將灰盒子中的藍色盒子居中,但只要我將它們居中,它們甚至不是水平的。我無法確定是什麼導致他們不平衡。任何人都可以看到是什麼造成的?將diving中的3個盒子對齊

div.event_container{ 
width:100%; 
overflow: hidden; 
height:245px; 
padding: 5px; 
margin-top: 0px; 
margin-bottom: 5px; 
margin-left: auto; 
margin-right: auto; 
background-color:#999; 
border-top: 0px; 
position:relative; 
top: 65px; 
left: 0px; 
clip: rect(5px, 0px, 0px, 0px); 
z-index: 1; 
} 

div.event_box{ 
    display: inline-block; 
    width:27%; 
height:190px; 
    padding: 10px; 
margin: 10px auto; 
background-color:#B9DAF4; 
    position: relative; 
border-top: 0px; 
    border-radius: 5px 10px 5px 10px/10px 5px 10px 5px; 
} 

.event_text { 
width:90%; 
min-width:700px; 
max-width:2000px; 
min-height:100px; 
    position: relative; 
    top: 40px; 
padding: 15px; 
margin-top: 60px; 
margin-bottom: 0px; 
    margin-left: auto; 
    margin-right: auto; 
background-color:#fff; 
    text-align: left; 
border-top: 1px solid #A3A3A3; 
    z-index:1; 
} 

.div_center3 { 
margin:0 auto; 
width:850px; 
background-color: #666; 
text-align: center; 
position: relative; 
} 

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

守則

<div id="content"> 
<div class="div_center3"> 

<!--Start header text--> 
     <div class="event_text"> 
     <p class="htext"> Information & Innovation at USM hosts a variety of  business  and industry tours through the academic year, 
      as well as showcases projects and hosting job fairs. I&I is very active  in coordinating efforts with Maine business and industry 
      leaders in many capacities.</p> 
     <p class="htext">I&I hosts tours of local IT industry leaders, such as Texas  Instruments and Wright Express in South Portland. 
       In December of 2010, I&I showcased an array of research and  development  projects at the fifth Business and Industry Homecoming event 
      where technology leaders and staffing specialists from major Maine   corporations were in attendance for the corporate event at the John 
      Mitchell Center at USM Gorham's campus.</p> 

    </div><!--End event_text div--> 
    <!--End Header text--> 


<!--Start event boxes--> 
    <div class="event_container"> 

<div class="event_box">  
     <h3>State of IT in Maine Conference</h3> 
      Oct 18, 2012 
      <p style="text-align: justify;">Stay Tuned for more information!!</p> 
      <!--<a href="#">Read more</a>--> 
     </div> 

<div class="event_box">  
     <h3>Business & Industry Tours</h3> 
      Fall of 2012 
      <p style="text-align: justify;">Each year, company representatives conduct  business tours for IT students where they describe their 
      particular industry, as well as types of jobs and needed skills. This is a  great opportunity for students to network and 
      get real world knowledge of the workforce.</p> 
      <p>Stay tuned for more information!! </p> 
      <!--<a href="#">Read more</a>--> 
     </div> 

     <div class="event_box">  
     <h3>IT Job Fair</h3> 
      Fall of 2012 
      <p style="text-align: justify;">This is an exclusive opportunity for IT  and Computer Science students.<br /> 
       Come meet potential employers offering internships and employment in  Information Technology and Computer Science feilds. 
      </p> 
      <p style="text-align: justify;">Stay Tuned for more information!!</p> 
      <!--<a href="#">Read more</a>--> 

     </div> 
    </div> 

    <div id="pipe_container"> 
     <div id="event_pipe">  
      <script src="http://l.yimg.com/a/i/us/pps/listbadge_1.6.js">   {"pipe_id":"2a44070dcf6974aea04ad155a76caef4","_btype":"list","width":"80%","height":"350px ", "margin":"auto"}</script> 
     </div> 
    </div> 
    </div> 
    </div> 
<!--end holder--> 
+0

發表您的HTML代碼格式化或在引擎收錄,請 – FabioCosta

+1

還是在的jsfiddle。 –

回答

1

問題是垂直取向;將verical-align:top添加到div.event_box

默認情況下,元素具有基線的垂直對齊,它將元素的基線與父元素的基線對齊。

FIDDLE

+0

這樣做!非常感謝!!你們真棒.... –