Question

我有一些嵌套的<div>元素，我想按如下方式显示它们：

 A  B  C
 D  E

同样需要占据整页。我尝试设置width: 100%但不能在IE浏览器中工作。通过指定它在所有浏览器中工作的像素。但那个时候我怎么能给像素占据整页？所以任何人都可以帮助我完成上述设计，占据整个页面并在所有浏览器中工作。

HTML：

<div class="root" style="width:100%">
    <div>
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
    <div>D</div>
    <div>E</div>
</div>

CSS：

.root > div {
    display :inline-block;
}

请参考下面的小提琴：http://jsfiddle.net/yQpx6/

Answer 1

你的HTML不是很一致。你也可以改变它

<强> HTML

<div class="root" style="width:100%">
    <div>
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </div>
    <div>
        <div>D</div>
        <div>E</div>
    <div>

</div>

<强> CSS

.root > div > div 
    {
       float:left;
       width: 33%;
    }

JSFiddle ：http://jsfiddle.net/yQpx6/3/

OR

<强> HTML

<div class="root" style="width:100%">

        <div>A</div>
        <div>B</div>
        <div>C</div>

        <div>D</div>
        <div>E</div>

</div>

<强> CSS

.root > div 
{
   float:left;
   width: 33%;
}

JSFiddle： http://jsfiddle.net/yQpx6/4/

Answer 2

您可以通过float:left轻松构建此内容，但如果可以再添加一个<div>来保存D和E div，那么它就能正常工作。

一些修改将是以下

<div class="root" style="width:100%">
    <div>
        <div class='floatleft'>A</div>
        <div class='floatleft'>B</div>
        <div class='floatleft'>C</div>
    </div>

    <div style='clear:both'> 
        <div class='floatleft'>D</div>
        <div class='floatleft'>E</div>
    </div>
</div>

css将是

.floatleft
{
    float:left;
    padding:2px;
}

working demo

Answer 3

尝试：

CSS

.root div > div {
  display: inline-block;
}

HTML

<div class="root" style="width:100%">
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div>
<div>
    D
</div>
<div>
    E
</div>
</div>
</div>

Answer 4

试试这个：

HTML：

<div class="root" style="width:100%">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</div>

CSS：

.root > div 
{
float:left;
display:inline-block;
width: 33%;
}

宽度将是div之间的空间。这意味着您的div有任何宽度，您可以手动决定div /行的空格/数量。

示例：http://jsfiddle.net/yQpx6/6/

将div对齐以在所有浏览器中工作＆gt; = IE8

HTML：

CSS：

4 个答案: