0

嘿，我只是想将两个 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;
}

任何帮助将非常感激。

4

6 回答 6

3

您在“包装器”ID 周围缺少双引号。

我通过尝试修改您的代码发现了这一点，这突出了错误。（提示：下次给我们做个小提琴）

你的 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;
}

您可以将两个框向左浮动以将它们并排放置，或者将一个向右浮动。

于 2013-09-19T23:46:49.807 回答
1

为什么会出事？项目的自动浮动已离开。

也许你的意思是

float: right;

试试这个^^

于 2013-09-19T23:46:39.290 回答
1

通常这是一个问题，当第二个元素的宽度不能水平地适合父元素时。灰盒类是否添加任何填充？

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

此外，box1 样式在填充中存在语法错误。以下所有样式都不会生效。这应该是您的解决方案。

于 2013-09-19T23:49:34.073 回答
0

你应该清理那个代码，伙计。很多错误，缺少（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/

于 2013-09-21T06:38:43.477 回答
0

你的代码中有很多错别字。缺少双引号和分号。此外，您多次忘记给您的值提供一个单位（如px）。

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

于 2013-09-19T23:54:34.727 回答
0

为什么你把溢出：隐藏到#box1和#box2？你知道 {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;
    }

看到j​​sfiddle

于 2013-09-20T03:57:57.150 回答