0

这是我正在处理的页面:

http://artificialmarketingsolutions.com/step-1-choose-your-route/

我将它们放在具有设定高度的容器中,但它们超出了该高度。此外,它们会溢出到内容区域并重叠,而不是简单地降低当前内容。

感谢您的任何提示!

天哪,我是个白痴!这是代码:

CSS:

.steps {
   width: 500px;
   height: 70px;
   display: block;
   padding: 10px;
}

HTML:

<div class="steps">
  <a href="http://www.advantagegrandcanyon.com"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/BackButton.png"></a>
  <img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/Step1.png">
  <a href="http://www.artificialmarketingsolutions.com/step-2-choose-your-trip-duration"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/NEXT.png"></a>
</div>  

图片下方的代码:

<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/full-grand-canyon/"><img class="imgs alignnone size-full wp-image-27" alt="FullGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/FullGrand.jpg" width="274" height="204" /></a>
<strong>Full Grand Canyon Trip Features:​&lt;/strong>
<ul>
    <li>Longest Route Option​&lt;/li>
    <li>Up to 187, 225 or 279 River Miles​&lt;/li>
    <li>Motorized Trips from 6-10 Days</li>
    <li>​Non Motorized Trips  from 10-18 Days</li>
    <li>No Mandatory Hiking In or Out</li>
    <li>Over 104 Rapids</li>
    <li>All Raft Types Available​&lt;/li>
</ul>
Full canyon river trips begin at Lees Ferry, river mile zero, and continue downstream to one of the "take out" or departure points.  These take-out points are as follows: The Whitmore Helipad at river mile 187, the Diamond Creek Road at river mile 225, a take-out via jetboat ride across Lake Mead beginning just below Separation Canyon at river mile 240 or Pearce Ferry river mile 279.


</div>
<div id="middle">

<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/upper-grand-canyon/"><img class="imgs alignnone size-full wp-image-29" alt="UpperGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/UpperGrand.jpg" width="274" height="204" /></a>

<strong>Upper Canyon Trip Features:​&lt;/strong>
<ul>
    <li>Shortest Route Option​&lt;/li>
    <li>89 River Miles</li>
    <li>Motorized Trips 3-5 Days</li>
    <li>Non Motorized Trips 5-8 Days​&lt;/li>
    <li>Must Hike out 7.5-10 miles</li>
    <li>Over 41 Rapids</li>
    <li>All Raft Types Available</li>
</ul>
Running from Lees Ferry to Phantom Ranch in the heart of the Grand Canyon, the upper portion is 89 miles long. Upon leaving Lees Ferry, you will quickly enter Marble Canyon. Within a few miles, the first signs of the fascinating geology of the canyon begin to appear as the Kaibab and Toroweap formations make their appearance, followed by Coconino Sandstone​.


</div>
<div id="right-side">

<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/lower-grand-canyon/"><img class="imgs alignnone size-full wp-image-28" alt="LowerGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/LowerGrand.jpg" width="274" height="204" /></a>
<strong>Lower Canyon Trip Features:​&lt;/strong>
<ul>
    <li>Multiple Trip Length Options​&lt;/li>
    <li>​98, 136 or 190 River Miles</li>
    <li>Motorized Trips 5-6 Days​&lt;/li>
    <li>Non Motorized Trips 7-10 Days</li>
    <li>Must Hike in 7.5-10 miles</li>
    <li>Over 60 Rapids</li>
    <li>All Raft Types Available</li>
</ul>
Your trip will begin at the South Rim of the Grand Canyon.  All passengers going on lower canyon trips spend part of day 1 hiking down Bright Angel Trail to Phantom Ranch (approx. 10 Miles) or to Pipe Creek Beach (approx. 7.5 Miles) depending on the outfitter’s exact meeting point. ​


</div>

<div id="info-container" style="width:100%; height: 100%; display: inline-block;">
<div id="left-info">
  <a href="http://artificialmarketingsolutions.com/grand-canyon-routes/full-grand-canyon/">More Info</a>
  </div>
<div id="middle-info">
  <a href="http://artificialmarketingsolutions.com/grand-canyon-routes/upper-grand-canyon/">More Info</a>
  </div>
<div id="right-info">
  <a href="http://artificialmarketingsolutions.com/grand-canyon-routes/lower-grand-canyon/">More Info</a>
  </div>
</div>
4

2 回答 2

0

你的代码:

<div class="steps">
  <a href="http://www.advantagegrandcanyon.com"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/BackButton.png"></a><!--br /-->
  <img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/Step1.png"><!--br /-->
  <a href="http://www.artificialmarketingsolutions.com/step-2-choose-your-trip-duration"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/NEXT.png"></a>
</div>

您应该做的只是删除这些<br />标签,因为它们导致箭头出现在新行上。已经在上面的代码中注释掉了它们,所以你可以看看我在说什么。

接下来,如果您希望它们在任一侧,您可能还想浮动这些箭头。

CSS

.steps a{
    float:right;
}
.steps a:first-child{
    float:left;
}
于 2013-05-25T21:45:52.257 回答
0

解决方案:

.steps {
   width: 500px;
   height: 70px;
   clear:both !important;
   display: block;
   padding: 10px;
}
于 2013-05-25T21:50:15.717 回答