Question

周六早上好，周六快乐，

我的页面没有错，但我刚才意识到我错误地创建了一个主内容列。我确实需要列为主要内容。左栏专用于主要内容，右栏专用于其他小东西，例如横幅和其他div。

右列宽度必须包含宽度为336px的广告横幅。只是为了让您了解右列的宽度必须是多少。

我如何实现这一目标？

非常感谢你的帮助。

以下是我目前的css代码：

<style>

    .navmenu {
        background-color: #FFFFFF;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        align-items: center;
    }

    .navmenu li:last-child {
        margin-left: auto;
    }

    .navmenu ul li a {
        text-decoration: none;
        margin: 4px;
        padding: 5px 20px 5px 20px;
        color: #FFFFFF;
        background: #4285F4;
        display: inline-block;
    }

    .main-content {
        padding: 5px 20px 5px 20px;
        line-height: 18px;
    }

</style>

谢谢这是我的整个页面：

 <!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

      <title>CLIHELP - Help for Command Line Interface</title>
      <meta name="description" content="Help for Command Line Interface">
      <meta name="author" content="clihelp.org">

    <style>

        .navmenu {
            background-color: #FFFFFF;
        }

        .navmenu ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            align-items: center;
        }

        .navmenu li:last-child {
            margin-left: auto;
        }

        .navmenu ul li a {
            text-decoration: none;
            margin: 4px;
            padding: 5px 20px 5px 20px;
            color: #FFFFFF;
            background: #4285F4;
            display: inline-block;
        }

        .main-content {
            padding: 5px 20px 5px 20px;
            line-height: 18px;
        }

        .feedback-search {
            font-size: 13px;
        }

        .feedback-search a {
            text-decoration: none;
        }

        .feedback-search a:hover {
            text-decoration: underline;
        }   

        .title {
            font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
            font-size: 18px;
        }

        .title a {
            text-decoration: none;
        }

        .title a:hover {
            text-decoration: underline;
        }   

        .tags {
            font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
            font-size: 13px;
            color: #006621;
        }

        .script {
            font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
            font-size: 13px;
        }

    </style>

</head>
<body>
    <div class="navmenu">
        <ul id=menu>
            <li><a href="http://www.clihelp.org/Clihelp%20V2/index.php">Clihelp</a></li>
            <li><form action='q.php' method='GET'>
                <input type='text' size='25' name='search'>
                <input type='submit' style='position: absolute; left: -9999px' name='submit'/>
                    </form></li>
        </ul>
    </div>

    <div class="main-content">
    <?php

        $button = $_GET ['submit'];
        $search = $_GET ['search'];

        if (!$button)
            echo "you didn't submit a keyword";
        else {
            if (strlen($search) <= 1)
            echo "Search term too short";
            else {
            echo "<p>Your search - <b>$search</b> ";

            mysql_connect("localhost", "username", "password");
            mysql_select_db("db");

            $search_exploded = explode(" ", $search);

            foreach ($search_exploded as $search_each) {

                $x++;

                if ($x == 1)

                $construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR  os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
                else
                $construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR  os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";

            }

            $construct = "SELECT * FROM cliCommand WHERE $construct";
            $run = mysql_query($construct);

            $foundnum = mysql_num_rows($run);

            if ($foundnum == 0)
                echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
            else {
                echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><br><br>";

                while ($runrows = mysql_fetch_assoc($run)) {
                $cliCommandId = $runrows ['cliCommandId'];
                $code = $runrows ['code'];
                $os = $runrows ['os'];
                $title = $runrows ['title'];
                $tags = $runrows ['tags'];
                $script = $runrows ['script'];

                echo "
        <div class='title'><a href=''>$title</a></div>
        <div class='tags'>$tags</div>
        <div class='script'>$script</div><br>
        <p>
        ";
                            }
                    }
                }
        }
    ?>
    </div>
</body>
</html>

Answer 1

更改结构以添加如下包装：

<div class="wrapper">
    <div class="main-content">
    </div>
    <div class="sidebar">
    </div>
</div>

然后在您的CSS上，您可以在包装上使用flexbox，在主要内容上使用float: left;，在侧边栏使用float: right;。

我在设计时忘记了正确的专栏。可以添加一个正确的列吗？

1 个答案: