Question

我在尝试在DIV中水平对齐3个DIV时遇到了一些麻烦（不是我所知道的最复杂的任务）。

我设法让它在FireFox中运行，但出于某种原因，在IE中，每个DIV似乎都显示在主DIV中的新行上。

FF中的示例输出（按预期/要求）：

DIV1 DIV2 DIV3

IE中的示例输出：

DIV1

DIV2

DIV3

我在这里附上了我的小提琴：http://jsfiddle.net/oampz/u6bWR/1/

奇怪的是，在我的jsFiddle上它在IE和FireFox中显得很好，但在我的应用程序中，使用完全相同的代码，我面临上述问题。

HTML：

<div class="ctr-full">
<div class="wrap">
    <div class="grid-wrap">
        <div class="grid one-whole">
            <ul class="list">
                <li>
                    <div class="toggle_head toggleInputbackground" style="position: relative;">
                        <div class="one-fiftieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
                            <img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
                            <img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
                        </div>
                        <div class="nineteen-twentieths" style="display: inline-block; vertical-align: middle; padding-top:10px;">
                            <label>Step 1 > Enter Details</label>
                        </div>
                        <div style="display: inline-block; vertical-align: middle; padding-top:10px;">
                            <label>?</label>
                        </div>
                    </div>
                    <div class="toggle_body">
                        <ul>
                            <li>
                                <label>text text text.</label>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>

CSS：

.toggleInputbackground {
    background: #B8B8B8;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #B8B8B8), color-stop(100%, #B8B8B8));
    background-image: -webkit-linear-gradient(#B8B8B8, #B8B8B8);
    background-image: -moz-linear-gradient(#B8B8B8, #B8B8B8);
    background-image: -o-linear-gradient(#B8B8B8, #B8B8B8);
    background-image: linear-gradient(#B8B8B8, #B8B8B8);
    color: #5C5C5C;
    height: 45px;
}
.nineteen-twentieths {
    width: 95%;
}
.one-fiftieths {
    width: 2%;
}
.one-whole {
    width: 100%;
}
.ctr-full {
    background: whitesmoke;
    padding: 12px 0;
    *zoom: 1;
}
.ctr-full:after {
    content:"";
    display: table;
    clear: both;
}
.wrap {
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1440px;
    *zoom: 1;
}
.wrap:after {
    content:"";
    display: table;
    clear: both;
}
.grid-wrap {
    margin-left: -24px;
    *zoom: 1;
}
.grid-wrap:after {
    content:"";
    display: table;
    clear: both;
}
.grid {
    float: left;
    padding-left: 24px;
}
.list li, .list dt, .list dd {
    padding: 4px 0;
}

jQuery的：

//hide the all of the element with class msg_body
$(".toggle_body").hide();
$(".collapse").hide();

//OnClick of a header componenet, toggle the visibility of all images which are direct children of .toggle_head
$(".toggle_head").click(function () {
    //alert("You clicked");
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function () {
        $this.children('img').toggle();
    });
});

我希望我错过了一些简单的东西。

由于

更新（硬编码宽度：）

<div class="toggle_head toggleReportInputbackground one-whole" style="display: inline-block;">
<div style="display: inline-block; padding-top:10px; width:5%;">
    <img src="/images/expand.png" border="0" alt="Expand" class="expand"></img>
    <img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img>
</div>
<div style="display: inline-block; padding-top:10px; width:80%;">
    <label class="boldText">Enter Details</label>   
</div>
<div style="display: inline-block; padding-top:10px; width:5%;">
    <label>?</label>
</div>
</div>

正如你所看到的，我已经使用了5％，80％和5％的宽度留下了10％的备用..我还从3个内容 vertical-align：middle; > divs 和位置：相对; 来自主/容器 div

我在这里跟我的小提琴：http://jsfiddle.net/oampz/u6bWR/2/

再一次，它在FF中显得很好.. IE仍在新线上显示。

Answer 1

尝试将float:left提供给所有三个DIV。这可能会解决您的问题。

Answer 2

您为前两个 divs （分别为2％和95％）定义了width，但没有为第三个定义?。这意味着第三个 div 只剩下3％。如果其内容（inline-block）大于其父级的3％，则div将分为新行。此外，您应该考虑在width: 3%布局中成为问题的空格。我建议将<div class="toggle_head toggleInputbackground" style="position: relative;"> <div class="one-fiftieths" style="display: inline-block; vertical-align: middle; padding-top:10px;"> <img src="/images/expand.png" border="0" alt="Expand" class="expand"></img> <img src="/images/collapse.png" border="0" alt="Collapse" class="collapse"></img> </div><div class="nineteen-twentieths" style="display: inline-block; vertical-align: middle; padding-top:10px;"> <label>Step 1 > Enter Details</label> </div><div style="display: inline-block; vertical-align: middle; padding-top:10px; width: 3%;"> <label>?</label> </div> </div>添加到第三个 div 并重写HTML以删除空格：

{{1}}

以下是完整的小提琴：http://jsfiddle.net/CjXQZ/1/

在DIV中水平对齐DIV - IE不工作

2 个答案: