相关疑难解决方法(0)

float:right - 为什么在容器下面?

我真的不明白为什么我的float: right;div低于容器div.我不知道如何解决这个问题.有人可以解释一下吗?我很久以前在另一个网站上遇到过这个问题,但完全忘记了如果我完成它我是如何设法修复它的.我希望它当然在容器内.

    <div id="menu">
        <div class="categories"></div>
        <img class="logo" src="#" />
        <div class="thumb"></div>
    </div>
Run Code Online (Sandbox Code Playgroud)

-

#menu
{
    width: 960px;
    height: 70px;
    margin: auto;
    background-color: blue;
}

#menu .thumb
{
    background-color: aqua;
    float: right;
    height: 60px;
    width: 400px;
}
Run Code Online (Sandbox Code Playgroud)

图片

html css

3
推荐指数
1
解决办法
7139
查看次数

Div标签内的Div标签在Firefox或Chrome中不起作用

这似乎非常简单,但我不知道为什么我不能在容器div标签内放置div标签,因为它不会在Firefox或Chrome中正确显示,它适用于IE6 ...... ??? 代码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
    <div id="nav">
        <p>Hello</p>
    </div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:style.css

body {
    background:white;
    font-family: sans-serif;

}
#container {
    margin:0 auto;
    width:960px;
    background:#e3e3e3;
    border:1px solid black;
}
#nav {
    padding:10px;
    margin-top:10px;
    float:left;
    width: 400px;
    height:100px;
    background:white;
    border:1 px solid black;
}
Run Code Online (Sandbox Code Playgroud)

这就好像容器没有随着DIV标签内部扩展一样......给出了什么?

html firefox html5 google-chrome

3
推荐指数
1
解决办法
8432
查看次数

CSS-clearfix:为什么使用“table”作为“display”属性?

我正在使用这些代码来制作包含浮动子项(而不是折叠)的包装元素:

.wrap:after {
  content: '';
  display: block;
  clear: both;
}
Run Code Online (Sandbox Code Playgroud)

现在我看到了使用table作为display值的代码。

据说这是为了“包含子元素的上边距”。

全文在这里:http : //nicolasgallagher.com/micro-clearfix-hack/

我已经对这两种变体(块、表)进行了修补,但我找不到任何区别。

有人可以提供一个示例来说明使用块或表之间的区别吗?

html css

3
推荐指数
1
解决办法
2415
查看次数

容器div不包围它的浮动子元素.我怎样才能解决这个问题?

我有一个像这样的XHTML结构:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="Seite" class="bgr">
<div id="Titel" class="bgr">
<h1>some titel</h1>
</div>

<div id="Mitte" class="bgr">
<div id="Navigation" class="bgr">
<ul>
<li><a href="link.html" class="aktiv"><img src="text.gif" alt="[Link]" /></a></li>
</ul>
</div>

<div id="Inhalt" class="uebersicht bgr">
Content
</div>
</div>

<div id="Fusszeile" class="bgr">
</div>

</div>

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

"Titel"和"Fusszeile"都是块元素(display:block;).额外的容器div"Mitte"主要用于保证金/填充和背景图像的原因."导航"和"Inhalt"的CSS如下所示:

div#Navigation {
float: left;
}

div#Inhalt {
margin: 0 0 1em 185px;
padding: …
Run Code Online (Sandbox Code Playgroud)

css xhtml

2
推荐指数
1
解决办法
5408
查看次数

具有动态高度的CSS和DIV

我有一个像这样的网页结构:

<div class="total">
    <div class="menu">
    </div>
    <div class="content">
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

所以"menu"div包含我的左侧菜单,而"content"div包含一些动态文本.实际上,我所做的结构都以正确的方式定位,在我的"总"div中.我实际上在我的CSS上编辑了我的"总"div,如下所示:

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
}
Run Code Online (Sandbox Code Playgroud)

问题是我无法获得我真正想要的东西:边框全部位于顶部(它就像一条水平行),并且我的div不会出现不同的背景颜色.

如何让"总"div的高度变得动态?

编辑:链接到jsFiddle

html css height dynamic

1
推荐指数
1
解决办法
1万
查看次数

选择标签的最后一个孩子

我正在研究一个项目,但我找不到一种方法来选择仪表板的最后一个孩子

<div class="dashboard">
<div class="grid_6 alpha">
<div class="grid_6 omega">
<div class="grid_6 alpha">
<div class="grid_6 omega">
<div class="grid_6 alpha">
<div class="grid_6 omega"> //i wanna select this
<div class="clear"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我试过了

.dashboard:last-child
.omega:last-child
Run Code Online (Sandbox Code Playgroud)

html css css-selectors

1
推荐指数
1
解决办法
96
查看次数

当显示较小时,Div会从外部div中弹出

我得到以下代码:https: //jsfiddle.net/2uhttdgk/3/

html {
  height: 100%;
}
html, body {
    min-height: 100% !important;
    /* prevent horizontal scrolling */
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


#menuButton {
    float:left;
    background-image: url("../images/hamburger_menu.png");
    width: 50px;
    height: 40px;
    margin-right: 5px;
}

#powerButtonBox {
    float: right;
}

#outerBox {
    min-height: 100%; 
    height: auto !important;
    height: 100%;
}

#title {
    background: #E95353;
    padding: 10px;
    color: white;
    font-size: x-large;
}


#outerBox {
    width: 100%;
    height: 100%;
}


.nav a …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

1
推荐指数
1
解决办法
68
查看次数

IE7背景颜色问题

任何人都可以告诉我为什么在IE7中这个网站的页脚上没有拾取背景颜色"黑色"?

http://james-gilmore.co.uk/index.html

css internet-explorer internet-explorer-7

0
推荐指数
1
解决办法
3913
查看次数