Css 内部分区为';t推其他div,无法弄清楚:两者都有;工作
我对Css 内部分区为';t推其他div,无法弄清楚:两者都有;工作,css,html,Css,Html,我对s有一些问题。内部(content div)不会推送外部(wrap\u content) 让我把代码贴出来,这样你就有机会看到可能出了什么问题 style.css * { padding: 0px; margin: 0px; } body { background: #e2e2e2; color: #f2f2f2; font-family: Arial; } #wrap_design { width: 1139px; } #wrap_content { float:
s有一些问题。内部
(content div)不会推送外部
(wrap\u content)
让我把代码贴出来,这样你就有机会看到可能出了什么问题
style.css
* {
padding: 0px;
margin: 0px;
}
body {
background: #e2e2e2;
color: #f2f2f2;
font-family: Arial;
}
#wrap_design {
width: 1139px;
}
#wrap_content {
float: right;
max-width: 963px;
height: 100%;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
}
#header {
height: 236px;
width: 963px;
background-color: #2d2828;
}
#headerimg{
z-index: 1;
margin-left: -26px;
}
#loggedin_box {
min-height: 230px;
width: 160px;
background: #2d2828;
float: left;
margin-top: 236px;
position: static;
padding-bottom: 5px;
}
#loggedin_box_green {
height: 30px:
width: 150px;
background: #73aa09;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
letter-spacing: 2px;
}
#loggedin_box ul {
border: none;
}
#loggedin_box ul li {
list-style: none;
text-align: left;
}
#loggedin_box ul li a {
font-family: Arial;
font-size: 14px;
color: #b1b2b2;
text-decoration: none;
padding-left: 5px;
}
#menu_container {
margin: 0px 0px 0px 0px;
background: #2d2828;
font-family: Arial;
width: 100%;
margin: 0px auto;
height: 65px;
}
#content {
color: black;
vertical-align: top;
height: 100%;
margin-bottom: 10px;
clear: both;
}
#content-sidebar {
border-left: 2px solid #2d2828;
float: right;
width: 285px;
max-width: 285px;
height: 100%;
}
index.php
<html>
<head>
<link rel="shortcut icon" href="images/nfgico.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<CENTER>
<div id="wrap_design">
<div id="loggedin_box">
<?php
if($_SESSION['username'] == "") {
?>
<div id="loggedin_box_green">Log ind</div>
<div style="text-align: left; padding-left: 10px;">
<form action="login_check.php" method="post">
<input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br />
<input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br />
<font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br />
<input type="submit" value="Log ind"><br /><br />
</form>
<ul>
<li><a href="#">Glemt kodeord</a></li>
<li><a href="/create_user.php">Opret bruger</a></li>
</ul>
</div>
<?php
} else {
?>
<div id="loggedin_box_green">Network</div>
<ul>
<li><a href="#">Wall</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Achievements</a></li>
<li><a href="#">Clanside</a></li>
<li><a href="#">Søg modstander</a></li>
<li><a href="#">Søg spil</a></li>
<li><a href="/index.php?logout=yes">Log ud</a></li>
</ul>
<?php
}
?>
</div>
<div id="wrap_content"> <!-- This is the one that needs to be pushed -->
<div id="header">
<img src="/images/banner.png" id="headerimg">
</div>
<div id="menu_container">
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><a href="/"><span>Forside</span></a></li>
<li><a href="#"><span>Nyheder</span></a>
<ul>
<li><a href="#">Seneste</a></li>
<li><a href="#">lol</a></li>
<li><a href="#">loool</a></li>
<li><a href="#">loool</a></li>
</ul>
</li>
<li><a href="#"><span>Artikler</span></a></li>
<li><a href="#"><span>Spil</span></a></li>
<li><a href="#"><span>Turneringer</span></a></li>
<li><a href="#"><span>Clan</span></a></li>
<li><a href="#"><span>Streams</span></a></li>
<li><a href="#"><span>Webshop</span></a></li>
</ul>
</div>
</div>
<!-- Content/brødtekst -->
<div id="content">
CONTENT GOES HERE THIS IS WHAT NEED TO PUSH
</div>
</div>
</CENTER>
</body>
</html>
日志索引
外壳mig:
网络
-
内容在这里,这是需要推动的
我没有发布index.php
中的部分代码,因为我希望您不需要它:)
我真的希望有人能帮助我!
另外,我在互联网上做了一些研究,并了解到我应该使用
clear:两者都使用
但我真的无法让它工作。从您的#wrap_内容样式中删除高度:100%
(这会导致问题),然后确保它环绕任何浮点元素,添加宽度和溢出,如下所示:
#wrap_content {
float: right;
max-width: 963px;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
width: auto; /* Must use this for overflow to do what you want */
overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */
}
作为一个小提示,这里有大量不必要的css。我鼓励您仔细阅读并修改/删除它。你可以用一半的css做你想要做的事情
删除所有“高度:100%;”选项-如果没有达到您认为的效果。我建议删除您的中心,并使您的“包裹”设计如下:
#wrap_design
{
margin: 0 auto;
width: 1139px;
}
这将使你的包装纸居中-我强烈建议不要居中。如果您想更改此包装的页边距顶部(即从顶部到底部为20px),请执行此页边距:20px auto
您不需要使用clear:两者都使用;必要地在一个浮点数(或多个浮点数)的包装器中,您只需将overflow:hidden(效果相同)放入,不需要额外的标记:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
overflow: hidden;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
</div>
.集装箱
{
背景:#CCC;
边框:1px实心#ddd;
溢出:隐藏;
宽度:400px;
}
左边
{
浮动:左;
}
.对
{
浮动:对;
}
这将向左浮动
这将向左浮动
如果本例中没有“overflow:hidden”,则在.container中不会看到“#CCC”背景色
这与使用clear way相同(但是上面的方法更好,因为标记更少):
.集装箱
{
背景:#CCC;
边框:1px实心#ddd;
宽度:400px;
}
左边
{
浮动:左;
}
.对
{
浮动:对;
}
清楚的
{
明确:两者皆有;
}
这将向左浮动
这将向左浮动
Clear方法在这样的情况下是很好的(当您想要一个“父对象之外”的子对象时):
.集装箱
{
背景:#CCC;
边框:1px实心#ddd;
保证金:50px自动;
宽度:400px;
}
左边
{
浮动:左;
}
.对
{
背景色:#333;
颜色:#FFF;
浮动:对;
裕度:-10px-40px 0;
}
清楚的
{
明确:两者皆有;
}
这将向左浮动
这将向左浮动
但是,我也不建议使用这种标记,如果您的设计可能不同,您也可以像这样使用clear:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
width: 200px;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
width: 240px;
}
.full
{
background: #f5f5f5;
clear: both;
margin: 20px auto;
text-align: center;
width: 90%;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="full">
this is full sized
</div>
</div>
.集装箱
{
背景:#CCC;
边框:1px实心#ddd;
保证金:50px自动;
宽度:400px;
}
左边
{
浮动:左;
宽度:200px;
}
.对
{
背景色:#333;
颜色:#FFF;
浮动:对;
裕度:-10px-40px 0;
宽度:240px;
}
.满
{
背景:#f5;
明确:两者皆有;
保证金:20px自动;
文本对齐:居中;
宽度:90%;
}
这将向左浮动
这将向左浮动
这是全尺寸的
如果你遵循这些例子,你应该解决你的问题:)你能解释一下为什么身高:100%代码>不做他认为它能做的事?不雄辩,但我会试试:高度:自动;是div的默认值,意味着它将拉伸以包含其中的内容。高度:100%将尝试拉伸div外部可用空间的全部高度(宽度:100%;确实如此),但高度:100%不可靠。在本例中,他希望它包含内部内容,而不是“填充”可用高度,因此高度:100%;这是有问题的。我通常对此也有问题,但似乎我必须为DOM树中的每个元素指定minheight:100%代码>CSS属性。谢谢+1.
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
width: 200px;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
width: 240px;
}
.full
{
background: #f5f5f5;
clear: both;
margin: 20px auto;
text-align: center;
width: 90%;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="full">
this is full sized
</div>
</div>