Question

我正在建立一个分类广告网站，我的列表存储在XML文档中。我使用simplexml将此文档加载到我网站的列表页面，然后使用foreach显示这些文档。

目前一切正常，只是输出的格式化我想改进。每个列表都堆叠在一起，如下：

LISTING
LISTING
LISTING
LISTING

我希望他们像这样 - 列出上市列表，然后到达列的边缘后，从下一行开始。

任何帮助表示赞赏！提前谢谢！

此处的相关PHP代码 -

<?php
// Loading the XML file
$xml = simplexml_load_file("listings.xml");

foreach($xml->listing as $listing)
{
    echo "<u>Item ID:</u> ".$listing->id."<br />";
    echo '<img src="images/' . $listing->image . '"width="200" height="225">';
    echo "<br>Item: ".$listing->title." <br />";
    echo "Description: ".$listing->description." <br />";
    echo "Seller: ".$listing->seller." <br />";
    echo "Price: ".$listing->price." <br /><br />";
}
?>

此处的相关XML文档 -

<?xml version="1.0" encoding="utf-8"?>
<advertlistings>
    <listing>
        <id>1</id>
        <title>Another fucking cooker</title>
        <description>Best cooker of them all</description>
        <image>fractal pyramid.jpg</image>
        <price>3400</price>
        <seller>MJ420</seller>
    </listing>

    <listing>
        <id>2</id>
        <title>Shit cooker</title>
        <description>Shite cooker of the world</description>
        <image>1479991892439-1307203880.jpg</image>
        <price>2735</price>
        <seller>MJ420</seller>
    </listing>
</advertlistings>

在制作本网站时，请忽略描述等，炊具成为我最大的敌人：p

Answer 1

你的问题的答案是答案，但这个答案不是你真正想要的那种。这个问题与样式（CSS和HTML标记）有关，但与PHP的关系却少得多。

使用时的标记formatting ，在本例中为CSS + HTML，因此我将为您提供与如何格式化列表列表有关的答案。< / p>

html { box-sizing: border-box; font-size: 62.5%; }
*, *:before, *:after { box-sizing: inherit; }
body {
	font-size: 1.4rem; font-family: helvetica, arial, sans-serif; background: #fafafa; line-height: 1.5;
	background: linear-gradient(to right, aliceblue, #ffe);
	margin-top:40px;
}

/* simple table grid */
.row { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 30px; }
.col { display: table-cell; height: auto; }

.ads {
	 width: 95%;
	 max-width: 660px;
	 margin: 0 auto;
	 position: relative;
}
.listing {
	width: 320px;
	background: #fff;
	z-index:0;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	backface-visibility: hidden;
	border-radius: 3px;
	overflow: hidden;
}
.inner { padding: 15px; position: relative; }
.listing h3 { margin-top: 0; }
.listing img { width: 100%; height: auto; }

.listing .price {
	font-weight: bold;
	font-size: 1.6rem;
	color: #d00;
	display: inline-block;
	float:right;
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	text-align: center;
	position: absolute; top:-40px; right: 15px;
	background: #f44336; color: #fff;
}

.listing .seller { font-size: 1.1rem; color: #aaa; }

.listing button {
	border:0; background: #111; color: #fff;
	width: 100%;
	clear:both;
	padding: 12px 0;
	margin: 30px 0 0;
	border-radius: 3px;
	text-transform: uppercase;
	cursor: pointer;
}

.listing button:hover { background: #333; }

.listing { transition: transform .15s ease; }
.listing:hover {
	transform: scale(1.05);
	z-index:1;
}

<div class="row ads">
	<div class="listing col">
		<img src="//placeimg.com/320/200/tech">
		<div class="inner">
			<h3>Another cooker</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$340</div>
			<div class="seller">Sold by MJ420</div>
			<button>Go to deal</button>
		</div>
	</div>
	<div class="listing col">
		<img src="//placeimg.com/320/200/any">
		<div class="inner">
			<h3>Some product here</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$195</div>
			<div class="seller">Sold by AR290</div>
			<button>Go to deal</button>
		</div>
	</div>
</div>
<div class="row ads">
	<div class="listing col">
		<img src="//placeimg.com/320/200/tech">
		<div class="inner">
			<h3>Another cooker</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$340</div>
			<div class="seller">Sold by MJ420</div>
			<button>Go to deal</button>
		</div>
	</div>
	<div class="listing col">
		<img src="//placeimg.com/320/200/any">
		<div class="inner">
			<h3>Some product here</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$195</div>
			<div class="seller">Sold by AR290</div>
			<button>Go to deal</button>
		</div>
	</div>
</div>
<div class="row ads">
	<div class="listing col">
		<img src="//placeimg.com/320/200/tech">
		<div class="inner">
			<h3>Another cooker</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$340</div>
			<div class="seller">Sold by MJ420</div>
			<button>Go to deal</button>
		</div>
	</div>
	<div class="listing col">
		<img src="//placeimg.com/320/200/any">
		<div class="inner">
			<h3>Some product here</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$195</div>
			<div class="seller">Sold by AR290</div>
			<button>Go to deal</button>
		</div>
	</div>
</div>
<div class="row ads">
	<div class="listing col">
		<img src="//placeimg.com/320/200/tech">
		<div class="inner">
			<h3>Another cooker</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$340</div>
			<div class="seller">Sold by MJ420</div>
			<button>Go to deal</button>
		</div>
	</div>
	<div class="listing col">
		<img src="//placeimg.com/320/200/any">
		<div class="inner">
			<h3>Some product here</h3>
			<p>The best cooker of them all, with a lot of swearwords in it for no obvious reason.</p>
			<div class="price">$195</div>
			<div class="seller">Sold by AR290</div>
			<button>Go to deal</button>
		</div>
	</div>
</div>

运行代码段并将其显示为“全屏”。

的jsfiddle

<强> https://jsfiddle.net/tommiehansen/0vr39L0k/6/

截图

教育

上面的示例只是一种方法可以做到这一点，但这里的重点是向您展示您还在询问有关品味的各个方面的问题，并且解决方案可以关于如何设计风格，使用什么技术等等，有很多不同的选择。

你应该做的是在Codecademy上采取某种关于HTML + CSS的初学者课程：
的 https://www.codecademy.com/learn/learn-html-css

那里还有很多课程，但是应该让你开始学习，并且能够让你掌握基础并且能够做基本的造型。

之后，您可以就HTML + CSS提出有关您希望实现的某些样式并遇到问题的具体问题。
更多样本
也可以随意发表评论并要求变化。堆叠div是CSS中最常见的事情之一，并且有很多可用的例子。

以下是其他一些例子：简单的CSS表格网格：http://codepen.io/tommiehansen/pen/YWwGvZ 使用display: inline-block（颜色框）：http://codepen.io/tommiehansen/pen/ZWNRoY

另外，请使用一些示例作为您自己测试的基础。从实践中学习毕竟是学习事物的好方法。

使用PHP显示格式整洁的XML文档？

1 个答案:

的jsfiddle

截图

教育