连续3格 - 无法找到最右边的一个排列

今天早上我一直在努力，我正在创建最终将成为WP主题的项目，该主题将包含近期工作的一部分，分隔线以及最近部分博文的水平对齐。事情开始很好地形成，但最右边的部分不断被推下。我认为这不是一个宽度问题，因为a）似乎有足够的空间和b）不管我对不同的宽度和填充做什么，问题依然存在。我觉得它可能与浮动有关，但我不知道如何解决这个问题。连续3格 - 无法找到最右边的一个排列

无论如何，这里就是我在寻找：在页面中心 current

我想为它是这样的，该分压器完美：

内容内容内容|内容内容内容

#recent { 
    border-top: 1px solid #202020; 
    padding-bottom: 40px; 
    padding-top: 40px; 
} 

#recent .divider { 
} 

#recent #recent-work { 
    float: left; 
} 

#recent #recent-work p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
} 

#recent #recent-work a { 
    padding-bottom: 40px; 
    padding-right: 20px; 
} 

#recent #recent-work .next{ 
    float: right; 
} 

#recent #recent-blog { 
    float: right; 
} 

#recent #recent-blog p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    padding-left: 20px; 
    text-transform: uppercase; 
} 

#recent #recent-blog a { 
    padding-bottom: 40px; 
    padding-left: 20px; 
} 

#recent #recent-blog .next{ 
    float: right; 
}

和

<div id="recent"> 
    <div id="recent-work"> 
      <p><span>Recent Work</span></p> 
      <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a> 
       <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a> 
       <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a> 
    </div><!-- end recent-work --> 

    <div class="divider"> 
     <img src="img/divider.png" alt="Section divider" /> 
    </div><!-- end divider --> 

    <div id="recent-blog"> 
     <p><span>Recent Blog</span></p> 
      <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a> 
      <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a> 
      <a href="#"><img src="http://lorempixel.com/120/120/" alt="Click for more information" /></a> 
     </div><!-- end recent-blog --> 
</div><!-- end recent -->

来源

2012-06-18 AMC

看来你并没有为你的分隔符设置浮点数。添加：

#recent .divider { 
display: block; 
float: left; 
} 

#recent #recent-work { 
display: block; 
float: left; 
}

您应该为所有div添加display：block属性，以防万一。

例here（所以视变得足够大的滑动左边部分）

来源

2012-06-18 15:35:04

完美，谢谢。 – AMC

根据表格查看我的版本（在我的答案中）。当空间紧张时效果会有所不同，可能会或可能不会达到您想要的效果。 –

可能我也许提出一个不同的做法？

表格的使用在这里非常方便，所以使用<tr>和<td>标签来轻松对齐元素。

但是如果你不喜欢使用表格，你总是可以使用位置：绝对值和带有边距和填充的位置。

来源

2012-06-18 15:33:24 dennis

不知道是谁投票给你，但他们应该对此做出评论。我已经表决过，因为我还建议表格是实现这一目标的绝佳方法。 –

当然，我可能会在这里看错方向，所以投我一票是没有问题的，只是评论为什么会被赞赏。我仍然不明白为什么表是错误的方法。谢谢朱利安。 – dennis

他们不是一个错误的方法。不幸的是，有些人反对他们。他们没有想到为什么某些事情可能是好的或坏的，只是盲目地根据几年前的信息做出假设，即使新的信息并不完全准确。 –

尝试使用float: left;到＃最近，博客了。人和：

#recent .divider { 
    float: left; 
}

来源

2012-06-18 15:35:52 CoursesWeb

试试这个最近DIV

white-space:nowrap;

来源

2012-06-18 15:39:52

我建议Google search第一。它看起来像任何最重要的结果可以根据您的需求进行调整。

当然，最简单也最稳健的方法是使用TABLE，它在过去十年的所有平台上都很容易正确使用并正确工作。对于那些需要非常大的缩放级别等极端设置的人来说，它也会降级。它也不需要任何花哨的CSS，HTML5或覆盖修复损坏的IE版本。

My version of Rorok_89's answer based on tables。事实上，也许不是我所说的“最简单”。 CSS更简单，但HTML中还有更多字符。我会注意到CSS可以比示例更简单。

来源

2012-06-18 15:42:44

连续3格 - 无法找到最右边的一个排列

回答

相关问题