Question

我试图将两个div并排排列。左侧是图像，右侧是第一个项目的文本。左侧的文字，右侧第二个项目的图像。最后是左侧的图像，右侧第三个项目的文字。

它适用于第一和第三项。第二项无法对齐。我做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
padding: 5px;
background-color:#66C;
}

.imageContainer {
    margin: 0 25px 0 0;
    float: left;
    height: 301px;
    width: 301px;
    background-color:#0CC;
    position:absolute;
    margin-bottom: 50px;
}

.imageContainerRt {
    margin: 0 0 0 0px ;
    float: left;
    height: 301px;
    width: 301px;
    background-color:#0CC;
    margin-bottom: 50px;
}

.text {
    height: 301px;
    padding: 5px 5px 0 0;
    background-color:#C96;
    margin-left:321px;
    margin-bottom: 50px;
}

.text2 {
    height: 301px;
    padding: 5px 5px 0 0;
    background-color:#C96;
    margin-right:301px;
    margin-bottom: 50px;
}
</style>
</head>

<body>
<!-- First -->

  <div class="container">
    <div class="imageContainer"><img alt="It takes a winning strategy to achieve business success" src="http://market-velocity.com/wp-content/uploads/2013/07/strategy400x400-300x300.jpg" width="300" height="300" /></div>
    <div class="text">
      <h5><span style="color: #66448a;">It takes a winning strategy to achieve business success</span></h5>
      Market-Velocity helps companies map their destination and guides them for a strong competitive advantage.

      The way most companies talk to the market is ineffective. We utilize Strategy Drivers to help your team clearly differentiate you from your competition. We take a close look at what you are saying to your clients and prospects and how your brand affects lead generation and business development.
  <h6><span style="color: #666666;">Strategy Drivers</span></h6>
  <ul class="insideBullet">
    <li><strong>Navigate</strong> – mapping your core identity and differentiation that is compelling to your clients</li>
    <li><strong>Advance</strong> – defining the perception that you want others to have about your company</li>
    <li><strong>Arrive</strong> – developing your messages and fostering the culture of being relentless in your pursuit</li>
  </ul>
      </div>

  <!-- Second -->

    <div class="text2">
      <h5><span style="color: #66448a;">It takes a winning strategy to achieve business success</span></h5>
      Market-Velocity helps companies map their destination and guides them for a strong competitive advantage.

      The way most companies talk to the market is ineffective. We utilize Strategy Drivers to help your team clearly differentiate you from your competition. We take a close look at what you are saying to your clients and prospects and how your brand affects lead generation and business development.
  <h6><span style="color: #666666;">Strategy Drivers</span></h6>
  <ul class="insideBullet">
    <li><strong>Navigate</strong> – mapping your core identity and differentiation that is compelling to your clients</li>
    <li><strong>Advance</strong> – defining the perception that you want others to have about your company</li>
    <li><strong>Arrive</strong> – developing your messages and fostering the culture of being relentless in your pursuit</li>
  </ul></div>
  <div class="imageContainerRt"></div>



  <!-- Third -->

    <div class="imageContainer"><img  alt="It takes a winning strategy to achieve business success" src="http://market-velocity.com/wp-content/uploads/2013/07/strategy400x400-300x300.jpg" width="300" height="300" /></div>
    <div class="text">
      <h5><span style="color: #66448a;">It takes a winning strategy to achieve business success</span></h5>
      Market-Velocity helps companies map their destination and guides them for a strong competitive advantage.

      The way most companies talk to the market is ineffective. We utilize Strategy Drivers to help your team clearly differentiate you from your competition. We take a close look at what you are saying to your clients and prospects and how your brand affects lead generation and business development.
  <h6><span style="color: #666666;">Strategy Drivers</span></h6>
  <ul class="insideBullet">
    <li><strong>Navigate</strong> – mapping your core identity and differentiation that is compelling to your clients</li>
    <li><strong>Advance</strong> – defining the perception that you want others to have about your company</li>
    <li><strong>Arrive</strong> – developing your messages and fostering the culture of being relentless in your pursuit</li>
  </ul>
    </div>
  </div></div>
  </div>
</body>
</html>

Answer 1

为每一行添加一个额外的div（作为包装器），并且css将是

.wrapper{
   width:100%;
   overflow:hidden;
 }

Answer 2

.imageContainerRt应该float:right，而不是left

.imageContainerRt {
    margin: 0 0 0 0px ;
    float: right;
    height: 301px;
    width: 301px;
    background-color:#0CC;
    margin-bottom: 50px;
}

还要确保清除浮动，通过将类clearfix添加到父容器中将其放置在所有浮动容器之后

<div class="container clearfix"></div>

并添加CSS

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

FIDDLE HERE

Answer 3

我重写了一下你的代码。删除了开销，并使用子类编写了更具可扩展性。

http://codepen.io/anon/pen/Getju

它无法与您的代码一起使用的原因。 - 空div - 标记错误 - 浮动问题（使用容器）

如果将元素彼此浮动，则将它们始终放在一个容器中 - 不要浮动容器。

Floats解释得很好： http://css-tricks.com/all-about-floats/

DIV未能正确对齐

3 个答案: