Question

这是我正在处理的页面：

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:</strong>
<ul>
    <li>Longest Route Option</li>
    <li>Up to 187, 225 or 279 River Miles</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</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:</strong>
<ul>
    <li>Shortest Route Option</li>
    <li>89 River Miles</li>
    <li>Motorized Trips 3-5 Days</li>
    <li>Non Motorized Trips 5-8 Days</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:</strong>
<ul>
    <li>Multiple Trip Length Options</li>
    <li>98, 136 or 190 River Miles</li>
    <li>Motorized Trips 5-6 Days</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>

Answer 1

您的代码：

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

Answer 2

<强>解决方案：

.steps {
   width: 500px;
   height: 70px;
   clear:both !important;
   display: block;
   padding: 10px;
}

使图像水平对齐

2 个答案: