CSS -align 3 responsive Divs-left right with position fixed and center normal答案

【问题标题】：CSS -align 3 responsive Divs- left right with position fixed and center normalCSS -align 3 responsive Divs-left right with position fixed and center normal
【发布时间】：2014-10-18 15:57:56
【问题描述】：

我只是不能让那些左右固定的 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>

真实的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>

真正的 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%;
}

【问题讨论】：

你能把你想要做什么更清楚一点吗？这里显然需要付出很多努力，但我无法计算出您想要的结果。
我想你正在寻找这个jsfiddle.net/victor_007/qwxoj8k2/2
@VitorinoFernandes 天哪，你是我的上帝！谢谢，你能上传答案让我投票吗？
欢迎您 :) 添加了答案

标签： html css responsive-design css-position fixed

【解决方案1】：

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

JS Fiddle

【讨论】：

完美解决方案！我希望我能投票，但我的声誉很烂，哈哈
我自己已经尝试了好几个小时了。真棒

【解决方案2】：

嗨，巴里，你可以使用引导 css 框架...

http://www.getbootstrap.com

它非常易于使用...

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

【讨论】：