gpt4 book ai didi

php - 尝试创建图像表时出现 CSS 问题

转载 作者:太空宇宙 更新时间:2023-11-04 06:52:16 25 4
gpt4 key购买 nike

已解决:达到预期结果 Harambe bless us

问题

我正在尝试创建一个网页,以类似表格的格式显示通过 PHP 从 .txt 中提取的数据。

我已经多次修改代码,只是希望血腥图像在达到最大页面宽度时继续到新行...

index.php

    <!DOCTYPE html>
<!-- Template by html.am -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Layout &mdash; Left Menu with Header &amp; Footer</title>
<link rel="stylesheet" href="/dashboard/css/style.css">
</head>
<body>
<header id="header">
<div class="innertube">
<h1>Header...</h1>
</div>
</header>
<div id="wrapper">
<main>
<div id="content">
<div class="innertube">
<h1>Heading</h1>
<?php
$contents = file('test.txt', FILE_IGNORE_NEW_LINES);
echo '<div class="row">';
foreach ($contents as $content)
{
echo '<div class = "column">';
if ($content == 'error')
{
echo '<img src="harambe.jpg" alt="Italian Trulli">';
echo '<figcaption>Caption goes here</figcaption>';
}
else {
echo '<img src="Neo Tokyo 2098.jpg" alt="Italian Trulli">';
echo '<figcaption>Caption goes here</figcaption>';
}
echo '</div>';
}
echo '</div>';
?>
</div>
</div>
</main>

<nav id="nav">
<div class="innertube">
<h3>Left heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<h3>Left heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<h3>Left heading</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</nav>
</div>

<footer id="footer">
<div class="innertube">
<p>Footer...</p>
</div>
</footer>

</body>
</html>

CSS

body {
margin:0;
padding:0;
font-family: Sans-Serif;
line-height: 1.5em;
}


#header {
background: #ccc;
height: 100px;
}

#header h1 {
margin: 0;
padding-top: 15px;
}

main {
padding-bottom: 10010px;
margin-bottom: -10000px;
float: left;
width: 100%;
}

#nav {
padding-bottom: 10010px;
margin-bottom: -10000px;
float: left;
width: 230px;
margin-left: -100%;
background: #eee;
}

#footer {
clear: left;
width: 100%;
background: #ccc;
text-align: center;
padding: 4px 0;
}

#wrapper {
overflow: hidden;
}

#content {
margin-left: 230px; /* Same as 'nav' width */
}

.innertube {
margin: 15px; /* Padding for content */
margin-top: 0;
width: 100%;
}
.innertube img{
height: 100px;
width: 100px;
}
.row{
background-color: red;
display:flex;
position: relative;
width: 100%;
}
.column{

}
.innertube figure{
position: relative;

}
p {
color: #555;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul a {
color: darkgreen;
text-decoration: none;
}

1 : /image/cJiPK.jpg问题网站基本图片

我尝试更改 CSS、HTML、添加 div 标签、删除 div 标签、截断和更改整个 S.O 问题中的代码,我认为我的要求没有不合理。

最佳答案

CSS

.row {
background-color: red;
position: relative;
width: 100%;
}
.row:after {
content: '';
display: block;
clear: both;
}
.column {
position: relative;
float: left;
width: 10%;
height: 120px;
}
.column figcaption {
position: absolute;
bottom: 0;
left: 0;
}

关于php - 尝试创建图像表时出现 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52747311/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com