2017-06-02 138 views
0

最後兩個白色矩形的div沒有在stirringminds.com/partners對齊的div垂直usign引導

HTML與他人一致:

<div class="row"> 
<div class="container"> 
<div class="col-md-2 listwords" style="position:relative;top:32px;margin-bottom:50px;"> 
<button id="showall" class="active" style="font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;border:none;">ALL DEALS&nbsp;</button> 
<button id="show" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">BUSINESS&nbsp;</button> 
<button id="show2" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DESIGN&nbsp;</button> 
<button id="show3" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DEVELOPMENT&nbsp;</button> 
<button id="show4" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">MARKETING&nbsp;</button> 
<button id="show5" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SALES&nbsp;</button> 
<button id="show6" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SUPPORT&nbsp;</button> 
<button id="show7" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">PRODUCTIVITY&nbsp;</button> 
<button id="show8" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DIY&nbsp;</button> 
<button id="show9" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LEARNING&nbsp;</button> 
<button id="show10" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LIFE&nbsp;</button> 
</div> 

<a href="https://aws.amazon.com" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:27%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Amazon Web Services<br><span style="color:#888;">Up to $1000 credits for 1 year.</span></div></div></a> 

<a href="https://www.ameyo.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:35%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/Ameyo-emerge-logo-white.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Ameyo Emerge<br><span style="color:#888;">3 free Ameyo Emerge licenses for 3 months.</span></div></div></a> 

<a href="https://www.cliklawyer.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:25%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Clik Lawyer<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a> 

<a href="https://cloud.google.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:18%;"><img class="dealsimg" src="http://stirringminds.com/wp-content/uploads/2017/05/gcplogo1-300x300-e1496441677297.jpg"/></div><div class="col-md-8" style="position:relative;top:15%;">Google Cloud Platform<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a> 

<a href="https://aws.amazon.com" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:27%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Amazon Web Services<br><span style="color:#888;">Up to $1000 credits for 1 year.</span></div></div></a> 

<a href="https://www.ameyo.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:35%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/Ameyo-emerge-logo-white.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Ameyo Emerge<br><span style="color:#888;">3 free Ameyo Emerge licenses for 3 months.</span></div></div></a> 

<a href="https://www.cliklawyer.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:25%;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png"/></div><div class="col-md-8" style="position:relative;top:15%;">Clik Lawyer<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a> 

<a href="https://cloud.google.com/" target="_blank"><div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><div class="col-xs-4" style="position:relative;top:18%;"><img class="dealsimg" src="http://stirringminds.com/wp-content/uploads/2017/05/gcplogo1-300x300-e1496441677297.jpg"/></div><div class="col-md-8" style="position:relative;top:15%;">Google Cloud Platform<br><span style="color:#888;">10% discount on all money recovery matters.</span></div></div></a> 

</div> 
</div> 

我怎樣才能與別人一致呢?

回答

1

看着你的來源 - 我看到你有左邊的盒子正確包裝在一列 - 但你沒有包裝右邊的列。他們需要共計12列。

<div class="row"> 
    <div class="col-md-2"> LEFT HAND CONTENT</div> 
    <div class="col-md-10">All of your buttons go here</div> 
</div> 
+0

我在您告訴我的地方添加了col-md-10它是對齊的,但它有更少的寬度,你可以在stirminds.com/partners pls上看到它嗎? –

+1

很簡單,因爲你的元素仍然是「col-md-4」。如果你想使用'col-md-10'作爲父div,你應該指定'col-md-5'。 – codekaizer

+1

是的,這就是我所做的呃,謝謝一堆! –

1

最快的方法是添加一個間隔:

<div class="col-md-2 dealsdiv">&nbsp;</div> 

<div class="col-md-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"> 
    <div class="col-xs-4" style="position:relative;top:25%;"> 
     <img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/cl.png"> 
    </div> 
    <div class="col-md-8" style="position:relative;top:15%;"> 
     Clik Lawyer<br> 
     <span style="color:#888;"> 
      10% discount on all money recovery matters. 
     </span> 
    </div> 
</div> 

但最巧妙的方法是有3列。

一個用於導航(col-md-2),那麼剩下的兩列(col-md-5)就是你的內容,每行有四行。

+0

嘿這將工作,如果divs是靜態的。無論何時按下列表中的單詞,它都會過濾矩形,在這種情況下,當它用隔離器加載div時,會變得格式化 –