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

I have a web page with an image and title with a description and I want to put another column next to the image and title and text with the same structure.

我有一个带有描述的图像和标题的网页,我想在图像和标题和文本旁边添加另一列具有相同的结构。

I have this

我有这个

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

And this css

这个css

.miniaturas {
    display: inline;
    border-radius: 10px;
    float: left;
}

.description {
    font-size: 15px;
    background-color: #A4A4A4;
    display: inline;
    border-radius: 3px;
    margin-left: 5px;
    width: 10%;
}

.gamede{
    font-size: 20px;
    font-weight: bold;
    display: inline;
    margin-left: 5px;
}

I want yo put the same structure image, title and description next to the first

我想要把第一个结构图像,标题和描述放在第一个旁边

I try to put a width to the description but it doesn't work.

我尝试在描述中加宽,但不起作用。

Its like this http://jsfiddle.net/Ninjacu/t9r9S/4/

就像这样http://jsfiddle.net/Ninjacu/t9r9S/4/

And I want to out the second image next to the first like in two columns

而且我想在第一张图片旁边的第二张图片中填写两列

2 个解决方案

#1

It seems you want something like this:

看来你想要这样的东西:

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

This should work.Give width to the div containing the structure so everything you put inside that div will fall in place.

这应该工作。给包含结构的div增加宽度,这样你放在div里面的所有东西都会落到位。

#2

I'm assuming the question stems from two things - your current layout isn't quite working correctly and you are interested in adding another column to the existing layout. I adjusted your original code and removed the php (it isn't relevant for a layout question), then applied a table-row and table-cell based layout via css (not using an actual table tag). One other thing I did was I used div tags for layout rather than trying to force layout on specific tags such as the "a" tag. Doing this you end up with the following html:

我假设问题源于两件事 - 您当前的布局不能正常工作,并且您有兴趣在现有布局中添加另一列。我调整了原始代码并删除了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>

In the css the key pieces are:

在css中,关键部分是:

.gamedes { display: table-row; }
.miniaturas { display: table-cell; }
/* etc */

To see the whole thing running, take a look at this JSFiddle: http://jsfiddle.net/hPLNK/4/

要看到整个运行,请看看这个JSFiddle:http://jsfiddle.net/hPLNK/4/

So, given this layout, all you have to do to add a new column now is add a new <div> inside of the "gamedes" and set the css display style to table-cell!

所以,给定这个布局,现在要添加新列的所有工作就是在“gamedes”中添加一个新的

并将css显示样式设置为table-cell!

Final Note - The original code you provided had a few other issues that I fixed. A <script> tag is for including javascript. You seem to want to include text. An image tag can't have a </img> inside of it. Avoid using <br/> to force a height on a div or area. Instead use css based layouts.

最后的注意事项 - 您提供的原始代码还有一些我修复的其他问题。

Small PHP Example

小PHP示例

In case you need some help getting the PHP back into this example, my recommendation is to put the php code inline. You end up with something like:

如果你需要一些帮助让PHP回到这个例子中,我的建议是将php代码内联。你最终会得到类似的东西:

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

I made the assumption here that your image link is stored in "$imageUrl", but you get the idea. The nice thing about putting php inline like this is it reads a little more cleanly and editing the html becomes much easier. Best of luck!

我在这里假设您的图像链接存储在“$ imageUrl”中,但您明白了。像这样放入php内联的好处是它读得更干净,编辑html变得更容易。祝你好运!

#1