Question

嘿我只是试图把两个div放在一起，就像我用“float：left”做了几百次，但它根本就没有发生。第二个div位于第一个div之下。

以下是代码：

<div id=wrapper" style="overflow: hidden; width: 1000;">
<div id="box1"  class="greybox">
    Right
</div>

<div id="box2" class="greybox">
Left
</div>
</div>

和css：

#box1 {
margin-top: 70;
margin-left: 85;
width: 440px;
height: 450px;
padding-left: 40px;
padding-top: 1px;
padding-right: 20px
float: left;
overflow: hidden;
}

#box2 {
margin-top: 70;
margin-left: 30;
width: 20px;
height: 300px;
padding-left: 0px;
padding-top: 1px;
overflow: hidden;
float: left;
}

非常感谢任何帮助。

Answer 1

你错过了关于“包装”ID的双引号。

我通过尝试从代码中生成fiddle来发现这一点，这突出了错误。（提示：下次为我们做个小提琴）

你的CSS中也有一些错误，你的宽度都很奇怪。

修正：

<div id="wrapper" style="overflow: hidden; width: 1000;">
        <div id="box2" class="greybox">Left</div>
    <div id="box1" class="greybox">Right</div>

</div>

#box1 {
    margin-top: 70;
    margin-left: 85;
    width: 200px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    overflow: hidden;
}
#box2 {
    margin-top: 70;
    margin-left: 30;
    width: 40px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    overflow: hidden;
    float: left;
}

您可以向左移动两个框以将它们并排放置，或者float one right。

Answer 2

通常，当第二个元素的宽度不能在父级中水平放置时，这是一个问题。 greybox类是否添加了任何填充？

此外，在您的粘贴中，包装ID缺少引号。如果通过样式表包含样式而不是内联样式，这将使父级没有宽度，并产生我描述的问题。

此外，box1样式在填充中具有语法错误。以下所有样式都不会生效。这应该是你的修复。

Answer 3

为什么会发生什么？项目的自动浮动已离开。

也许你的意思是

float: right;

尝试这个^^

Answer 4

您的代码中有很多拼写错误。缺少双引号和分号。此外，您多次忘记将您的值也设为一个单位（如px）。

如果您将修复所有这些错误，则按预期工作 - 请参阅jsFiddle

Answer 5

为什么你把溢出：隐藏到＃box1和＃box2？你知道{overflow：hidden;}

的使用吗？

你已经把overflow：hidden隐藏到主包装器

看到这个

<div id="wrapper" style="overflow: hidden; width: 1000px;">
<div id="box1"  class="greybox">
    left
</div>

<div id="box2" class="greybox">
Right
</div>
</div>

和css

 #box1 {
    margin-top: 70px;
    margin-left: 85px;
    width: 440px;
    height: 450px;
    padding-left: 40px;
    padding-top: 1px;
    padding-right: 20px;
    float: left;
    background:orange;

    }

    #box2 {
    margin-top: 70px;
    margin-left: 30px;
    width: 20px;
    height: 300px;
    padding-left: 0px;
    padding-top: 1px;
    background:green;
    float: left;
    }

请参阅jsfiddle

Answer 6

你应该清理那个代码。很多错误，丢失（px），分号，引号等......

<div id="wrapper" style="overflow: hidden; width: 1000;">
    <div id="box1"  class="greybox">Left</div>
    <div id="box2" class="greybox">Right</div>
</div>

#box1 {
width: 440px;
height: 450px;
padding: 1px 20px 0 40px; /* Order = Top, Right, Bottom, Left */
margin: 70px 0 0 85px;    /* Cleans up your code by eliminating margin-top, margin-right, margin-bottom, margin-left and same applies with padding */
float: left;
overflow: hidden;
}

#box2 {
width: 20px;
height: 300px;
padding: 1px 0 0 0;
margin: 70px 0 0 30px;
overflow: hidden;
float: left;
}

演示：http://jsfiddle.net/ZFTzY/5/

{float：left;}不工作

6 个答案: