我要求在htmls中有以下情况
public class ReadWithCsvDozerBeanReader
{
private static final String CSV = "firstname, lastname, height, weight, city,zipcode,latitude,longitude\n"
+ "bill,smith,180,200,ABC,123,48.8525525,2.3417763\n" + "james,smith,192,250,DEF,456,48.852129,2.3355093";
private static final int ATT_START_INDEX = 2;
private static final int ADDRESS_START_INDEX = 4;
private static final int GEO_LOCATION_START_INDEX = 6;
// custom preferences required because CSV contains spaces that aren't part
// of the data
private static final CsvPreference PREFS = new CsvPreference.Builder(
CsvPreference.STANDARD_PREFERENCE).surroundingSpacesNeedQuotes(true).build();
public static void main (String[] args) throws IOException
{
readWithCsvDozerBeanReader(new StringReader(CSV));
}
private static void readWithCsvDozerBeanReader (final Reader reader) throws IOException
{
ICsvDozerBeanReader beanReader = null;
try
{
beanReader = new CsvDozerBeanReader(reader, PREFS);
final String[] header = beanReader.getHeader(true);
// set up the field mapping, processors and hints dynamically
final String[] fieldMapping = new String[header.length];
final CellProcessor[] processors = new CellProcessor[header.length];
final Class<?>[] hintTypes = new Class<?>[header.length];
for (int i = 0; i < header.length; i++)
{
if (i < ATT_START_INDEX)
{
// normal mappings
fieldMapping[i] = header[i];
processors[i] = new NotNull();
hintTypes[i] = Person.class;
}
else if (i < ADDRESS_START_INDEX)
{
// attribute mappings
fieldMapping[i] = header[i];
processors[i] = new NotNull();
hintTypes[i] = PersonAttribute.class;
}
else if (i < GEO_LOCATION_START_INDEX)
{
// Address mappings
fieldMapping[i] = header[i];
hintTypes[i] = Address.class;
}
else
{
fieldMapping[i] = header[i];
hintTypes[i] = GeoLocation.class;
}
}
beanReader.configureBeanMapping(Person.class, fieldMapping, hintTypes);
Person person;
while ((person = beanReader.read(Person.class, processors)) != null)
{
System.out.println(String.format("lineNo=%s, rowNo=%s, person=%s", beanReader.getLineNumber(),
beanReader.getRowNumber(), person));
}
}
finally
{
if (beanReader != null)
{
beanReader.close();
}
}
}
}
我需要以全宽显示图像，但应该有一些文本填充。
如何设置这些场景的样式？
提前致谢。
答案 0 :(得分：3)
我不确定，你的意思，但我想到这样的事情：
基本上，您向padding提供<p>，然后使用margin的{{1}}删除<img>。
由于width相对于父元素的内容框，我们必须稍微更正width的{{1}}。
<img>img {
width: calc( 100% + 6em );
margin: auto -3em;
}
p{
padding: 3em;
}
答案 1 :(得分：1)
在执行添加CSS等其他操作之前，您需要确保HTML标记正确无误。
您的HTML可以是：
<p class="content">
<span class="text">Text Goes Here</div>
<img class="image" src="image-url" />
</p>
<强> CSS
现在将填充添加到.text类
.text{
padding:10px; /* This can be any value of your choice*/
display:block; /* Made it block since span is inline by default */
}
.image{
width:100%;
}
注意： 将类/ ID添加到HTML元素始终是一个好习惯
答案 2 :(得分：0)
添加css
short答案 3 :(得分：0)
尝试使用保证金负值设置img样式。使用父填充设置相同的值，但设置为负值。
<?php
$result = curl_exec($ch);
curl_close($ch);
$json = json_decode($result);
// BUILD THE TABLE INITIAL HEADER SECTION
$strTableOutput = "<table class='reservation-tbl' id='reservation-tbl'>" . PHP_EOL;
$strTableOutput .= "<tr class='reservation-header-row'>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>Client ID</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>Property</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>Property Name</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>First Name</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>LastName</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>E-Mail</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>Price</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>From</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>Till</th>" . PHP_EOL;
$strTableOutput .= "<th class='reservation-header-cell'>Status</th>" . PHP_EOL;
$strTableOutput .= "</tr>" . PHP_EOL;
$strTableOutput .= "<tbody class='reservation-body'>" . PHP_EOL;
// LOOP THROUGH THE JSON DATA & BUILD EACH ROW USING THE
// DATA PROVIDED BY THE JSON OBJECT
foreach ($json->data->reservations as $element) {
$strTableOutput .= "<tr class='reservation-data-row'>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->id}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->property}<br /><a href='{$element->infourl}' target='_blank'>{$element->infourl}</a></td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->propertyName}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->pricing->clientInfo->firstName}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->pricing->clientInfo->lastName}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->pricing->clientInfo->email}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->pricing->price}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->from}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->to}</td>" . PHP_EOL;
$strTableOutput .= "<td class='reservation-data-cell'>{$element->pricing->status}</td>" . PHP_EOL;
$strTableOutput .= "</tr>" . PHP_EOL;
}
// CLOSE THE TABLE-BODY AND THE TABLE
$strTableOutput .= "</tbody>" . PHP_EOL;
$strTableOutput .= "</table>" . PHP_EOL;
// DISPLAY THE HTML REPRESENTATION OF YOUR STRUCTURED TABLE-DATA
echo $strTableOutput;
p {
padding:20px;
background:#aaa;
}
p img {
margin:-20px;
}
答案 4 :(得分：0)
答案 5 :(得分：0)
如果你想在不影响你可以使用的图像的情况下将文本移动到内部
p{text-indent:10px;vertical-align: top; margin-top: 10px}
img{margin:10px;} <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
<img src=http://cdn-img.health.com/sites/default/files/styles/400x400/public/styles/400x400/public/styles/main/public/how-take-care-cat-400x400.jpg?itok=ta2kPB58>
<p>
答案 6 :(得分：0)
你可以简单地使用它：
<html>
<style>
span {
background-color: #808080;
}
</style>
<p><span>sometext<span></p>
<html>