CSS-将3个自适应Divs-align固定在左右位置，并且居中对齐 [英] CSS -align 3 responsive Divs- left right with position fixed and center normal

问题描述

我只是无法使那些左右固定div响应。 3格：|固定| |正常| |固定|
这3个div位于一个div中。
如果即时通讯在全尺寸窗口上运行正常，但是当我缩小窗口尺寸时，一切都变了。
我不知道该如何解决-我的中心div响应良好且居中。
，但固定的左和右也不会响应。
我想解决方案是连接到固定div的响应宽度..任何想法？
i为方便起见，添加了 JSFIDDLE 示例：

i just cant make those left right fixed divs responsive. 3 divs : |fixed| |normal| |fixed| those 3 divs are in one div. if im going on full scale window they are working perfectly, but as i down size the window it's screws the all thing up. i dont know how to fix that- my center div working perfectly- responsive and centered. but the left and right fixed just wont be responsive as well. i guess the solution is connected to responsive width of the fixed divs.. any ideas? i added JSFIDDLE example for your convenient :

这是结构：

<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%;
}

推荐答案

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

setting the width of the images to 100% will fit the images in the parent and made some minor changes to width of left and right

JS小提琴

这篇关于CSS-将3个自适应Divs-align固定在左右位置，并且居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！