Question

已解决：实现了预期的结果

问题

我正在尝试创建一个网页，以类似表格的形式显示通过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：https://i.stack.imgur.com/cJiPK.jpg出现问题的网站的基本图片

我已经尝试过更改CSS，HTML，添加div标签，删除div标签，从整个S.O的问题中砍断和更改代码，我不认为我的要求是不合理的。

Answer 1

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

尝试创建图像表时的CSS问题

1 个答案: