对齐的div垂直usign引导

最后两个白色矩形的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>

我怎样才能与别人一致呢？

来源

2017-06-02 Rui Farinha

看着你的来源 - 我看到你有左边的盒子正确包装在一列 - 但你没有包装右边的列。他们需要共计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>

来源

2017-06-02 22:39:18 Korgrue

我在您告诉我的地方添加了col-md-10它是对齐的，但它有更少的宽度，你可以在stirminds.com/partners pls上看到它吗？ –

很简单，因为你的元素仍然是“col-md-4”。如果你想使用'col-md-10'作为父div，你应该指定'col-md-5'。 – codekaizer

是的，这就是我所做的呃，谢谢一堆！ –

最快的方法是添加一个间隔：

<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）就是你的内容，每行有四行。

来源

2017-06-02 22:37:19 codekaizer

嘿这将工作，如果divs是静态的。无论何时按下列表中的单词，它都会过滤矩形，在这种情况下，当它用隔离器加载div时，会变得格式化 –

对齐的div垂直usign引导

回答

相关问题