Question

我正在为我的雇主网站创建自定义目标网页。

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>

你看到＆＃34; TEST BLOCK＆＃34;是我遇到麻烦的块。当你在网站上看到它时，我现在有一个订阅按钮。

Answer 1

删除两个水平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;
}

Answer 2

你需要使用 1）浮动：左要么 2）显示：内联块

两个街区 http://c2n.me/3yr3jOw

Answer 3

我发表评论但我没有足够的分数。

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

此外，您的<footer>代码应包含clear: both;。

在这里还有更多需要照顾的事情，但这应该让你走上正确的道路。

将两个<div>块并排排列--Wordpress网站

3 个答案: