大家早上好，周六快乐，
我的页面没有问题，但我只是意识到我只创建了一个主要内容栏是错误的。我确实需要为主要内容列。左栏专用于主要内容，右栏专用于其他小东西，例如横幅和其他 div。
右列宽度必须容纳宽度为 336 像素的广告横幅。只是为了让您了解右栏的宽度。
我如何实现这一目标？
非常感谢您的帮助。
下面是我当前的 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>最佳答案
更改您的结构以添加这样的包装器:
<div class="wrapper">
<div class="main-content">
</div>
<div class="sidebar">
</div>
</div>
然后在您的 CSS 上，您可以在包装器上使用 flexbox 或将 float: left; 用于主要内容，将 float: right;用于您的侧边栏。
关于php - 我在设计过程中忘记了正确的列。可以添加右列吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40819195/