0

我正在尝试并排对齐两个 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>
4

3 回答 3

0

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

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

它不适用于您的代码的原因。- 空 div - 标记错误 - 浮动问题（使用容器）

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

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

于 2013-07-31T16:25:31.267 回答
0

.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;
}

在这里提琴

于 2013-07-31T16:08:22.947 回答
0

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

.wrapper{
   width:100%;
   overflow:hidden;
 }
于 2013-07-31T16:06:08.563 回答