2 つの div を並べて配置しようとしています。最初の項目の左側の画像、右側のテキスト。左のテキスト、右の 2 番目の項目のイメージ。最後に、左側の画像、右側の 3 番目の項目のテキスト。
1 番目と 3 番目の項目では適切に機能します。2 番目のアイテムは整列に失敗します。私は何を間違えましたか？
<!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>