我已经在下面的帮助下修改了我的代码，但现在 图像和文字看起来“到处都是”。一些 在div背景后面有些infont，同样的 文字以及左边的一些文字， 一些在右边。
我拍摄了屏幕截图，并且 在下面添加了请求的html输出。
How it should look. http://i.stack.imgur.com/8O9uM.png
How it currently looks. http://i.stack.imgur.com/4GUfi.png
------------------------------
html output as requested
<div class="ind"><a href='127.0.0.1/forsale/105322_24718166' class='left'><img src='http://127.0.0.1/vebra/assets/105322_24718166_IMG_00.jpg' width='296px'></a><br /><h3>Wrexham</h3><p class="area">2 Bedroom property in LL11</p><div class="bottom"><div class="des"><p>Situated close to Wrexham town centre, this two bedroom mid terrace has gas central heating and double glazing and provi.....</p><ul id="info"><li><img src='127.0.0.1/vebra/assets/icons/money_icon.png'><span>£105000</span></li><li><img src='127.0.0.1/vebra/assets/icons/bed_icon.png'><span>2 Bedrooms</span></li><li><img src='127.0.0.1/vebra/assets/icons/area_icon.png'><span>LL11</span></li></ul><h3><br><br><a href='127.0.0.1/forsale/105322_24718166'>View Property Details</a></h3></div></div></div>
------------------------------
php code
echo '<div class="ind">';
echo "<a href='127.0.0.1/forsale/".$row['AGENT_REF']."' class='left'><img src='127.0.0.1/vebra/assets/".$row['MEDIA_IMAGE_02']."' width='296px'></a><br />"; // home image and link
echo '<h3>';
echo $row['TOWN'];
echo '</h3>';
echo '<p class="area">';
echo $row['PRICE'] . " Bedroom property in ". $row['POSTCODE1'];
echo '</p>';
echo '<div class="bottom">';
echo '<div class="des">';
echo '<p>' .htmlentities(substr($row['SUMMARY'],0,120)).".....".'</p>'; // shorten description
echo '<ul id="info">'; // price bed postcode
echo "<li><img src='127.0.0.1/vebra/assets/icons/money_icon.png'><span>"."£" . $row['PROP_SUB_ID']."</span></li>";
echo "<li><img src='127.0.0.1/vebra/assets/icons/bed_icon.png'><span>". $row['PRICE'] . " Bedrooms"."</span></li>";
echo "<li><img src='127.0.0.1/vebra/assets/icons/area_icon.png'><span>". $row['POSTCODE1']."</span></li>";
echo '</ul>';
echo '<h3>' . "<br>" . "<br>";
echo "<a href='127.0.0.1/forsale/".$row['AGENT_REF']."'>View Property Details</a>";
echo '</h3>';
echo '</div>';
echo '</div>';
echo '</div>';
------------------------------
css code
/* Sales Results nb overflow:scroll; */
li img { width: 20px; }
.left {
float: left;
margin-right: 10px;
}
#sale_results { }
#sale_results .sale_content { background-color: #fff; padding: 20px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; }
#sale_results .sale_content h2.pagetitle { font-size: 38px; line-height: 41px; margin: 0 0 3px 0; color: #C4DA4B; font-weight: bold; }
#sale_results .sale_content p.subtitle { font-size: 20px; line-height: 22px; margin: 0 0 20px 0; color: #9B9EA0; }
#sale_results .sale_content .ind { height: 221px; position: relative; border: 1px solid #dedede; width: 922px; margin: 0 20px 20px 0; background: #fff url(images/sub_page_bg.png) repeat-x bottom; }
#sale_results .sale_content .ind > img {width: 295px;}
#sale_results .sale_content .ind.last { margin: 0 0 20px 0; }
#sale_results .sale_content .ind .bottom { float:right; clear: left; padding: 19px 15px 15px; width: 588px; height:188px;}
#sale_results .sale_content .ind h3 { font-size: 20px; line-height: 22px; color: #575B5C; margin: 0 0 7px 0; font-weight: bold; }
#sale_results .sale_content .ind h3 a { color: #575B5C; }
#sale_results .sale_content .ind h3 a:hover { color: #333; }
#sale_results .sale_content .ind p.area { font-size: 14px; color: #9B9EA0; line-height: 16px; margin: 0 0 15px 0; }
#sale_results .sale_content .ind des { font-size: 12px; color: #9B9EA0; line-height: 16px; margin: 0 0 15px 0; }
#sale_results .sale_content ul#info { padding: 0; margin: 0; float: left; position: absolute; bottom: 61px;}
#sale_results .sale_content ul#info li { margin: 0 0 10px 0; float: left; width: 130px; padding:0; background: none; }
#sale_results .sale_content ul#info li img { float: left; width: 24px; height: 24px; margin: 0 10px 0 0; }
#sale_results .sale_content ul#info li span { font-size: 14px; font-weight: bold; color: #3B3E40; line-height: 24px; float: left; }
#sale_results .sale_content .ind a.view { background: url(images/view_more.png) no-repeat; position: absolute; bottom: 0; height: 39px; width: 265px; background-position: 0 0; font-size: 0px; line-height: 0px; text-indent: -9999px; border: none; cursor: pointer; float: left; margin: 15px 0; }
#sale_results .sale_content .ind a.view:hover { background: url(images/view_more.png) no-repeat; height: 39px; width: 265px; background-position: 0 -39px; }
PHP正在从数据库中获取信息 但我不能把文字放到右边 图像，它显示低对角线右 它应该在哪里。
------------------
- pic text -
- left right -
------------------
- text
- showing
- here
也许有新鲜眼睛的人可以看到我不是的东西
答案 0 :(得分：1)
尝试使用float: left;和float: right;
答案 1 :(得分：0)
尝试从此行中删除float：left：
#sale_results .sale_content ul#info li span { font-size: 14px; font-weight: bold; color: #3B3E40; line-height: 24px; float: left; }
答案 2 :(得分：0)
如果你在谈论顶部的图像，那么一个简单的float: left;就可以了。
因此，为图像或其锚点添加一个类，例如class="left"：
echo "<a class="left" href='127.0.0.1/forsale/?sale=".$row['AGENT_REF']."'><img src='127.0.0.1/vebra/assets/".$row['MEDIA_IMAGE_02']."' width='296px'></a><br />"; // home image and link
然后将它浮在你的css中：
.left {
float: left;
}
这是我想象你要完成的 jsfiddle 。