如何将文档分为html、php和css列

我有一个带有图像和标题以及描述的网页，我想在图像、标题和文本旁边放置另一列，并且具有相同的结构

我有这个

        echo '<div class="gamedes">';
        echo '<img  class="miniaturas" src="recursos/miniaturas/coster.png" </img>';
        echo '<a class="gamede" href="game.php?name='.$row['name'].'">'.$row['name'].'</a><br>';
        echo '<div class="description"><script>document.write("'.$row['description'].'".substring(0,120) + "<br>");</script></div><br><br><br><br>';
        echo '</div>';

我想把同样的结构图片，标题和描述放在第一个旁边

我试着给描述加宽，但没用

是这样的

---

我想在两列中列出第一个图像旁边的第二个图像，我假设这个问题来自两个方面-您当前的布局不太正常，您有兴趣在现有布局中添加另一列。我调整了您的原始代码并删除了php（它与布局问题无关），然后通过css应用了基于

表行

和

表单元格

的布局（不使用实际的表标记）。我做的另一件事是在布局中使用div标记，而不是试图在特定的标记（如“a”标记）上强制布局。完成此操作后，您将得到以下html：

<!-- This is a row -->
<div class="gamedes">
    <!-- this is a column -->
    <div class="miniaturas"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Google.png/800px-Google.png" /></div>
    <div class="gamede"><a href="game.php">Text for the link</a></div>
    <div class="description">This is a somewhat longer description here probably up to 120 characters</div>
</div>

要查看整个运行过程，请查看以下JSFIDLE：

因此，考虑到这种布局，您现在只需在“gamedes”中添加一个新的

，并将css显示样式设置为

表格单元格

最后一点-您提供的原始代码还有一些其他问题需要我解决。

标记用于包含javascript。您似乎想要包含文本。图像标记内部不能有

。避免使用

强制在分区或区域上设置高度。而是使用基于css的布局

小型PHP示例

如果您需要一些帮助将PHP返回到这个示例中，我的建议是将PHP代码内联。你最终会得到这样的结果：

<div class="miniaturas"><img src="<? echo($imageUrl); ?>" /></div>

“/>

---

我在这里假设您的图像链接存储在“$imageUrl”中，但您明白了。像这样将php内联的好处是它读起来更清晰，编辑html变得更容易。祝您好运！

您似乎想要这样的内容：

img   |  img
title |  title
des   |  des

echo '<div class="gamedes">';
echo '<img  class="miniaturas" src="recursos/miniaturas/coster.png" />';
echo '<a class="gamede" href="game.php?name='.$row['name'].'">'.$row['name'].'</a><br />';
echo '<div class="description"> <script>           document.write("'.$row['description'].'".substring(0,120)"); </script><br /></div><p>';
echo '</div>';


css:

.gamedes{
  width:20%;
  float:left;
}

.description{
  width:100%;
  overflow:hidden;
 }

img | img
头衔|头衔
des | des
回声'；
回声'；
回声“
”；
echo“document.write”（“.$row['description'].”子字符串（0120）”
'；
回声'；
css:
.加梅德斯{
宽度：20%；
浮动：左；
}
.说明{
宽度：100%；
溢出：隐藏；
}

---

这应该行得通。为包含结构的div指定宽度，以便放入该div中的所有内容都将就位。

是否尝试设置表格来填充整个文档，创建所需的1行和尽可能多的列？是的，但我更喜欢不创建表…如果您将

列表类型：none

和

显示：inline

设置为其

元素，也可以使用

，它将是水平的。你能用你的最终html设置一个脚本，这样我们就可以看到你现在有什么了吗？好的，但我需要这个脚本，因为我需要从数据库中获取描述。这是一个注释，不是一个答案。他问如何添加一个列。答案在哪里？我想我的视力正在衰退，因为我在你的评论集中找不到它。@Banana我相信这可能会更好！实际上好多了：）+1哦，是的，我想要这样的东西！但是img旁边的标题和des向下的标题都是float:left to image类，所以锚定标记会朝着image的右侧浮动。当你想要下面的“描述”时，让它的宽度为100%，这样“描述”就不能向左浮动。

<div class="miniaturas"><img src="<? echo($imageUrl); ?>" /></div>

img   |  img
title |  title
des   |  des

echo '<div class="gamedes">';
echo '<img  class="miniaturas" src="recursos/miniaturas/coster.png" />';
echo '<a class="gamede" href="game.php?name='.$row['name'].'">'.$row['name'].'</a><br />';
echo '<div class="description"> <script>           document.write("'.$row['description'].'".substring(0,120)"); </script><br /></div><p>';
echo '</div>';


css:

.gamedes{
  width:20%;
  float:left;
}

.description{
  width:100%;
  overflow:hidden;
 }