对齐困难

Question

看到图片附件，我需要左下方的每个框都在“NO IMAGE”图像旁边，我尝试了各种对齐但似乎无法弄明白：S有一个简单的这样做的方式我错过了吗？

这是我目前正在使用的代码：

<?php
include("header.php");
include("connect.php");

$getchamps = mysqli_query($con,"SELECT * FROM champions ORDER BY date DESC LIMIT 10");

?>

<style type="text/css">
TD{font-family: Arial; font-size: 8pt;}

</style>

<?php

while($r = mysqli_fetch_array($getchamps)){
$name = $r['name'];

    $img = '<img src="images/noimage.gif" />';

?>

<?php echo "<center>",$img,"</center><br>"; ?>

  <table BORDERCOLOR="grey" align="center" width="200" height="310">
<tr>
<td><b><font style="font-size: 8pt; color:#6699CC;">Name:</font></b></td>
<td><?php echo $name; ?></td>
</tr>
</table>

<?php
}
?>


<?php
include("footer.php");
?>

“$ img”是“NO IMAGE”，表格显示方框。

IGNORE PREVIOUS !!

对不起，这是一张更好的照片：

我想要它看起来非常糟糕...

更新

Answer 1

您可以尝试将表格包装在DIV和图像中，然后浮动每个DIV

#mainWrapper{
   position:relative;
   height:100%;
   width:100%;
    }

table{ 
 display:block;
    }

#tableWrapper{
    float:left;
    width:50%;
    }

#imageWrapper{
    float:right;
    width:50%;
    }

<div id="mainWrapper">
    <div id="tableWrapper">
        <table>
            <tbody>
            <tr>
                <td>row</td>
                <td>row</td>
                <td>row</td>
            </tr>
            <tr>
                <td>row</td>
                <td>row</td>
                <td>row</td>
            </tr>
            <tr>
                <td>row</td>
                <td>row</td>
                <td>row</td>
            </tr>
            <tr>
                <td>row</td>
                <td>row</td>
                <td>row</td>
            </tr>

            </tbody>
        </table>

    </div>

    <div id="imageWrapper">
        <img src="http://i.stack.imgur.com/ISZpH.png" alt=""/>
    </div>
</div>

Answer 2

您需要的是使用CSS进行一些浮动定位。我在JSFiddle上举了一个例子。

编辑：我更新了这个解决方案和小提琴，以增加＆＃34; champs＆＃34;之间的间距。

这是标记：

<div class="champ">
    <img class="noimage" src="" alt="no image" />
    <div class="info">
        <div class="namelabel">Name:</div>
        <div class="name">Sample Name 1</div>
    </div>
</div>
<div class="champ">
    <img class="noimage" src="" alt="no image" />
    <div class="info">
        <div class="namelabel">Name:</div>
        <div class="name">Sample Name 2</div>
    </div>
</div>

这里是CSS：

.champ {
    clear: both;
    overflow: auto;
    margin: 0 auto 8px auto;
    width: 358px;
}
.noimage {
    float: left;
    height: 100px;
    width: 200px;
    border: 1px solid black;
}
.info {
    float: left;
    height: 60px;
    width: 150px;
    border: 1px solid black;
    font: 8pt Arial;
    padding: 40px 0 0 4px;
}
.namelabel {
    float: left;
    color: #6699CC;
    font-weight: bold;
    margin-right: 8px;
}