最后两个白色矩形div与stirringminds.com/partners
处的其他白色矩形div不对齐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 </button>
<button id="show" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">BUSINESS </button>
<button id="show2" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DESIGN </button>
<button id="show3" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DEVELOPMENT </button>
<button id="show4" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">MARKETING </button>
<button id="show5" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SALES </button>
<button id="show6" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">SUPPORT </button>
<button id="show7" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">PRODUCTIVITY </button>
<button id="show8" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">DIY </button>
<button id="show9" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LEARNING </button>
<button id="show10" style="border:none;font-family: Montserrat, 'Helvetica', 'Arial', sans-serif;">LIFE </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>
我如何将它们与其他人对齐?
答案 0 :(得分:1)
最快的方法是添加间隔符:
<div class="col-md-2 dealsdiv"> </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
)将是您的内容,每行四行。
答案 1 :(得分: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>