Question

我试图创建完全由DIV组成的3列布局，但我遇到了困难。

如果我使用旧的HTML 4方式表，我可以这样做：

SET OPTION isolation_level=1;

好的是桌子占50％，桌子居中。这是我在DIV中尝试的内容：

<div style="width:100%">
    <table width="50%" align="center">
        <tr>
            <td align="left">
                <img src="whatever.jpg">
            </td>
            <td align="center">
               1 2 3
            </td>
            <td align="right">
                <img src="whateverright.jpg">
            </td>
         </tr>
     </table>
</div>

我能做到的唯一方法是，如果我知道内部div中所有元素的总像素数或者em，那么我可以设置它的宽度并使其居中，但是这里＆＃39;这个问题。

我使用的图像来自精灵，大小以像素表示。我使用的中间文本是大尺寸的数字。根据用户的屏幕分辨率调整文本大小。

指定文本大小（以像素为单位）将导致显示器尺寸错误的人在读取数字时出现问题。我正在创建一个先进的分页系统。

有没有办法可以将一个3列的div放在另一个div中，而不需要内部div宽度的总和？

我尝试只将<div style="width:100%;overflow:hidden;"> <div> <div style="float:left;"> <img src="whatever.jpg"> </div> <div>1 2 3</div> <div style="float:right;"> <img src="whateverright.jpg"> </div> </div> </div>添加到外部div中的主div，但没有成功。

请记住，

内部div的内部列正确地为我呈现，因为我喜欢它。只是将整个事物集中在较大的div中的问题是一个问题。我正在寻找可以与IE7一起使用的解决方案。

Answer 1

好的，你必须相应地使用显示属性。

.table{
    width: 500px;
}
.row{
    width: inherit;
    display: block;
}
.cell{
    width: 33.3%;
    height: 50px;
    
    display: inline-block;
    vertical-align: top;
    
    text-align: center;
    margin: 0px -2.5px;
    border: 1px solid #C0C0C0;
}

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <img src="whatever.jpg">
        </div>
        <div class='cell'>1 2 3</div>
        <div class='cell'>
            <img src="whateverright.jpg">
        </div>
    </div>
            
            
    <div class='row'>
        <div class='cell'>
            <img src="whatever.jpg">
        </div>
        <div class='cell'>1 2 3</div>
        <div class='cell'>
            <img src="whateverright.jpg">
        </div>
    </div>
</div>

Answer 2

我认为它会解决你的问题

HTML

<div style="width:100%;overflow:hidden;">
<div>
    <div class="div" style="">
        <img src="whatever.jpg">
    </div>
    <div class="div2">1 2 3</div>
    <div class="div3">
        <img src="whateverright.jpg">
    </div>
</div>

CSS

  div .div,.div2,.div3{
        width: calc(100% - 66.666666%);
        /* Firefox */
        width: -moz-calc(100% - 66.666666%);
        /* WebKit */
        width: -webkit-calc(100% - 66.666666%);
        /* Opera */
        width: -o-calc(100% - 66.666666%);
        width: expression(100% - 66.666666%);
        display: inline-block;
    }
    .div{
        float:left;
        background:purple;

    }
    .div2{
        float:right;
        background:red;

    }
    .div3{
        background:blue;
    }

Answer 3

事实证明，对我来说真正的答案是浮动每个内部容器并指定每个内部容器的宽度百分比，并且宽度加起来是外部容器的宽度，每个内部容器必须有一些东西。例如：

<div style="width:100%;overflow:hidden">
    <div style="float:left;width:20%">
     some text at left
    </div>
    <div style="float:left;width:60%">
     some text in middle
    </div>
    <div style="float:left;width:20%">
     some text at right
    </div>
</div>

将包含可变大小文本的3列div居中放在另一个div中

3 个答案: