CSS -align 3响应​​Div-左右，位置固定，中心正常

Question

我不能让那些左右固定的div响应。 3个div：|固定| |中| |固定| 这3个div在一个div中。 如果我进入全尺寸窗口他们工作得很好，但随着我缩小窗户尺寸，它会把所有东西搞得一团糟。 我不知道如何解决这个问题 - 我的中心div工作完美 - 反应灵敏，集中。 但左右固定也不会响应。 我想解决方案是连接到固定div的响应宽度..任何想法？ 为方便起见，我添加了JSFIDDLE示例：

这是结构：

<div>

<div **fixed** left>     <img>                                                      </div>
<div **normal** center>       2 divs for left and right inside the center div       </div>
<div **fixed** right>                                                               </div>

</div>

REAL html：

<div id="div_header">
    <div class="cloumn right" id="div_right"><img src="http://placehold.it/250x600"></div>
    <div  class="cloumn center" id="div_center">
        <div id="inside_center">
          <div    class="left_side" id="left_inside_center">


          </div>
            <div class="right_side" id="right_inside_center">
                <h1> headline </h1>
                <img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg">
            </div>
        </div>
        </div>


    <div class="cloumn left" id="div_left"><img src="http://placehold.it/250x600"></div>
</div>
</div>

REAL CSS：

body {
    margin-top: 0 !important;
    direction: rtl;
}

#right_inside_center img {
    width: 97%;
    margin-top: 7px;
}
#left_inside_center {
    float:left;
    width:inherit;
}
#right_inside_center {
    float:right;
    width:65%;
}
#inside_center {
    height: auto;
    overflow: hidden;

}

#div_header {
    text-align: center;
    display: table;
    width: 100%;
    table-layout: fixed;
}
.cloumn {
    display: table-cell;
}
.center {
   background:green;

    height: 1500px;
    width: 60%;
}
.left {

    position: fixed;
    width: 18%;
}
.right {

    position: fixed;
    width: 18%;
}

Answer 1

将图片的宽度设置为100%将适合父级中的图像，并对左右width进行一些细微更改

JS Fiddle

Answer 2

你好barry你可以使用bootstrap css框架工作......

http://www.getbootstrap.com

这很容易使用......

如果您需要有关bootstrap的更多详细信息，请访问官方网站。