浮动div无法与浮动或显示

因此，我是新的web开发，只是试图得到移动div的萦绕，但是当我包括任何浮动语句我的背部消失。以我的代码如下，如果你删除float: right我的第二师再次出现。这种情况发生时，我尝试漂浮其中任何一个，甚至尝试display: inline-block有人帮助！：）谢谢。浮动div无法与浮动或显示

我想说明我已经尝试了每个浮动组合，我都能想到只是为了看看我是否将它们错误地移动了。

body { 
 
    background-color: grey; 
 
} 
 

 

 
.division1 { 
 
    background-color:blue; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    margin-left: 10px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title> Practice with divs!</title> 
 
    <link href = "style.css" type = "text/css" rel = "stylesheet"/> 
 
</head> 
 
<body> 
 
    <div class = "division1"></div> 
 
    <div class = "division2"></div> 
 
</bod1y> 
 
</html>

来源

2016-11-29 dex last

的'最小宽度/ height'是'0'除非div有内容或一个显式的宽度。 – thebjorn

那么为什么如果你运行这个代码做2,100px div的出现？ –

我不太明白你在说什么。 –

body { 
 
    background-color: grey; 
 
} 
 

 

 
.division1 { 
 
    background-color:blue; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    margin-left: 10px; 
 
    width: 100px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title> Practice with divs!</title> 
 
    <link href = "style.css" type = "text/css" rel = "stylesheet"/> 
 
</head> 
 
<body> 
 
    <div class = "division1"></div> 
 
    <div class = "division2"></div> 
 
</bod1y> 
 
</html>

你必须给它一个宽度，否则，这将有0像素的宽度，因此无法显示。此外，浮动这两个div的，所以他们出现在彼此相邻。我希望这是你想要创造的结果。

来源

2016-11-29 20:20:02 NikxDa

这是，有一些小问题。他们为什么分开很远，而不是彼此相邻？其次，任何时候我使用最小/最大高度/宽度，我将不得不重新建立一个具体的宽度/高度？ –

由于“浮动：正确”; - 将其更改为“float：left;”，并且它们将彼此相邻:) – NikxDa

我没有看到任何大的保证金属性，所以为什么2个div之间有这样的距离？ –

如果向身体添加边框，您将看到发生了什么。你仍然需要设置一个宽度或最小宽度（或给它一些内容），它表明：

body { 
 
    background-color: grey; 
 
    border: 3px dotted red; 
 
} 
 

 
.division1 { 
 
    background-color:blue; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    max-width: 100px; 
 
    min-height: 100px; 
 
    /* min-width: 100px; */ 
 
    margin-left: 10px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
    <title> Practice with divs!</title> 
 
</head> 
 
<body> 
 
    <div class = "division1"></div> 
 
    <div class = "division2">x</div> 
 

 
</body> 
 
</html>

如果你只是想将两个同样大小的箱子旁彼此有更好的方法来做到这一点：

body { 
 
    height: 100px; width: 500px; 
 
    border: 3px dotted red; 
 

 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.one { width: 300px; background-color: lightblue; } 
 
.two { flex: 1;  background-color: lightgreen; } 
 
body>div { 
 
    padding: 1ex; 
 
    text-align: justify; 
 
}

<body> 
 
    <div class="one">Fixed width column.. "Sed ut perspiciatis unde 
 
    omnis iste natus error sit voluptatem accusantium doloremque 
 
    laudantium, totam rem aperiam, eaque ipsa quae ab illo 
 
    inventore </div> 
 
    <div class="two">"Sed ut perspiciatis unde omnis iste natus error 
 
    sit voluptatem accusantium doloremque laudantium</div> 
 
</body>

来源

2016-11-29 20:25:29 thebjorn

I W因为它们可以使它们彼此靠得更近，并通过在它们周围放置一个容器并对其设置一个大小来对齐它们。

尝试使用“ems”或像素以获得更高的准确性。


 

 
    body { 
 
     background-color: grey; 
 
    } 
 

 

 
    body { 
 
    background-color: grey; 
 
} 
 
.container{ 
 
    width:35%; 
 
} 
 

 
.division1 { 
 
    background-color:blue; 
 
    width: 100px; 
 
    height: 100px; 
 
    float:left; 
 
} 
 

 
.division2 { 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
    float:right; 
 
}

<!DOCTYPE> 
 
    <html> 
 
    <head> 
 
     <title> Practice with divs!</title> 
 
     <link href = "style.css" type = "text/css" rel = "stylesheet"/> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
    <div class = "division1"></div> 
 
    <div class = "division2"></div> 
 
</div> 
 
    </body> 
 
    </html>

来源

2016-11-29 20:29:50 trav

浮动div无法与浮动或显示

回答

相关问题