让两个 <div> 块并排对齐 - Wordpress 网站答案

【问题标题】：Having two <div> blocks aligned side by side - Wordpress website让两个 <div> 块并排对齐 - Wordpress 网站
【发布时间】：2016-09-22 03:46:05
【问题描述】：

我正在为我的雇主网站创建一个自定义登录页面。

http://juniorgoldreport.com/welcome/这是登陆页面。

我只是想提出一些想法，直到我们找到可靠的东西，所以目前着陆页非常简单。

我无法将我的身体分成两个不同的 div 块。

<div class="welcome-landing">
  <div class="landing-header">
    <div class="logo-img">
      <img src="http://juniorgoldreport.com/wp-content/uploads/2016/05/logoo2.png" alt="junior gold report logo" />
    </div>
  </div>

  <div class="landing-bar">
   <ul class="landing-nav">
     <li> <a href="http://juniorgoldreport.com/about-us/">About Us</a> </li>
     <li> <a href="http://juniorgoldreport.com/accredited-investors/" style="color:#cacaca">Accredited Investors</a> </li>
   </ul>   
  </div>

  <div class="landing-body">
    <div class="body-left">
      [layerslider id="11"]
    </div>
    <div class="body-right">
       TEST BLOCK
    </div>

  </div>
  <div class="landing-footer">
     FOOTER TEST
  </div>
</div>

你看到的“测试块”是我遇到问题的块。当您在网站上查看它时，我现在有一个订阅按钮。

【问题讨论】：

标签： html css wordpress

【解决方案1】：

你需要使用 1）浮动：左要么 2) display:inline-block

对于两个块 http://c2n.me/3yr3jOw

【讨论】：

【解决方案2】：

我会对此发表评论，但我没有足够的积分。

尝试将float: left; 添加到.body-left div 的CSS 中，并将float: right; 添加到.body-right。

另外，您的<footer> 标签应包含clear: both;。

这里还有很多事情需要处理，但这应该会让你走上正确的道路。

【讨论】：

【解决方案3】：

删除两个水平Divs之间的任何字符

  <div class="landing-body">
    <div class="body-left">
    //content here
    </div><div class="body-right">     <-- </div><div> No character in between
    //content here      
   </div>
  </div>

添加关注css

.body-left, .body-right {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}

【讨论】：