在我的设计中，我忘记了正确的列。添加一个正确的列是可能的吗？
在我的设计中，我忘记了正确的列。添加一个正确的列是可能的吗？
提问于 2016-11-26 14:09:14
早上好，祝大家星期六快乐，
我的页面没有什么问题，但我只是意识到我犯了一个错误，我只创建了一个主要内容列。我确实需要列一下主要内容。左列专用于主要内容，右列专用于其他小内容，如横幅和其他div。
正确的列宽度必须容纳宽度336 of的广告横幅。只是为了让您了解正确的列必须有多宽。
我怎样才能做到这一点？
非常感谢你的帮助。
下面是我当前的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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-26 15:41:10
更改结构以添加这样的包装器：
<div class="wrapper">
<div class="main-content">
</div>
<div class="sidebar">
</div>
</div>然后，在您的CSS上，您可以在包装器上使用flexbox，或者在主内容上使用float: left;，对侧边栏使用float: right;。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40819195
复制相关文章
相似问题
腾讯云开发者
