Question

我在堆栈溢出中搜索了我的问题。我有答案。但对于当前的问题，答案还不够。

这是代码

<div id="firstdiv">
        Testing 1
    </div>
    <div id="middlediv">
        <img src="image/testing.png" width="950px" height="150px"/>
    </div>
    <div id="lastdiv">
        Testing 2
    </div>

这是css

#firstdiv
    {   
        width:20%;
        position:absolute;
        border:1px solid DarkGrey;
        float:left;
    }
    #middlediv
    {
        width:60%;
        border:1px solid Blue;          
        margin-left:21%;
    }
    #lastdiv
    {
        width:20%;
        border:1px solid red;
        position:absolute;
        float:right;
    }

我的问题

我需要三列布局第一列应该在图像的中间左边，最后一列应该在右边（在所有分辨率中）。

注意：我不想使用RWD方法。

请帮我解决上述问题。

如果您不明白问题，请回复。请不要阻止我的帐户。

谢谢＆amp;问候马哈德

Answer 1

#firstdiv
{   
    width:20%;
    outline:1px solid DarkGrey;
    float:left;
}
#middlediv
{
    width:60%;
    outline:1px solid Blue;         
    float:left;
}
#lastdiv
{
    width:20%;
    outline:1px solid red;
    float:left;
}

这应该可以解决问题

Answer 2

不是使用position: absolute，而是可以尝试使用display: inline-block并删除html空格：

jsfiddle

HTML：

<div id="firstdiv">Testing 1</div><div id="middlediv"><img src="image/testing.png" /></div><div id="lastdiv">Testing 2</div>

的CSS：

#firstdiv {
    width:20%;
    display: inline-block;
}
#middlediv {
    width:60%;
    display: inline-block;
}
#lastdiv {
    width:20%;
    display: inline-block;
}

请注意，如果您不使用border-box，则使用边框会影响元素的大小。

Answer 3

像这样？

http://jsfiddle.net/BrYbJ/

HTML：

<div class="box">
    <div id="firstdiv">Testing 1</div><!--
    --><div id="middlediv"><img src="image/testing.png" width="950px" height="150px"/></div><!--
    --><div id="lastdiv">Testing 2</div>
</div>

的CSS：

.box {
    white-space:nowrap;
}

.box div {
    display:inline-block;
    vertical-align:top;
}

#firstdiv
{   
    width:20%;
    outline:1px solid DarkGrey;
}
#middlediv
{
    width:60%;
    outline:1px solid Blue;         
    position:relative;
}
#middlediv img {

三列布局图像应以两个分辨率为中心（1024乘768和1366乘768）

3 个答案: