Question

我想做以下事情，但我可能无法表达自己：

LEFT CONTENT |     IMAGEIMAGEIMAGE     | RIGHT CONTENT |

-

LEFT CONTENT |                    IMAGEIMAGEIMAGE                 | RIGHT CONTENT |

-

LEFT    |                 | RIGHT   |
CONTENT | IMAGEIMAGEIMAGE | CONTENT |

- 所以，左侧内容 - 正确的内容必须具有固定的宽度。当我缩小屏幕并且IMAGEIMAGEIMAGE没有空格时，LEFT CONTENT和RIGHT内容应该换行。

<div style="background-color: yellow;">
<div id="a">break me new lines</div>
<div id="b"><img src="http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Images-6.jpg" height="60" width="300"></div>
<div id="c">break me new lines</div>
</div>

#a
{
    float: left;  
    background-color: red; 
    width: 25%;
    max-width: 140px;
}

#b
{
    float: left; 
    width: 50%;
    text-align: center;
}

#c
{
    float: left; 
    background-color: blue; 
    width: 25%;
    max-width: 140px;
}

div
{
    height: 60px;
}

这里是what I tried

两个问题：

整个内容不会填充100％宽度，如您所见
图片位于3.列

Answer 1

您应该从max-width和#a删除#c，然后将width添加到img内的#b标记。

#a
{
    float: left;  
    background-color: red; 
    width: 25%;    
}

#b
{
    float: left; 
    width: 50%;
    text-align: center;
}

#c
{
    float: left; 
    background-color: blue; 
    width: 25%;    
}

div
{
    height: 60px;
}
#b img{
    width:100%;
}

Fiddle Demo

Answer 2

您应该删除#a和#c的最大宽度，或者您可以使用媒体查询来回复http://www.w3.org/TR/css3-mediaqueries/
添加

#b img { 宽度：100％; }

我认为最好将CSS框架用于响应并加速开发，例如twitter bootstrap

http://getbootstrap.com/css/#grid

Answer 3

这是我想要实现的目标：

http://jsfiddle.net/YkndN/

<div>
<div style="display: table-cell; background-color: red; width: 48%;">
    left l l l lllll l l lllll ll
</div>
<div style="display: table-cell; width: 2%; background-color: blue; text-align: center;">
    centeredwhichmustcausebreak
</div>
<div style="display: table-cell; background-color: green; width: 48%; text-align: right;">
    right rrrrr r r r rrrrrrrrr rrr
</div>
</div>

州关闭：）

三个div彼此相邻，中间应该是100％

3 个答案: