css居中动态div [英] css centering dynamic div

问题描述

我有一个div #content其中我在运行添加左浮动divs #block和div的固定宽度在div（a），#lcontent和#rcontent
的任一侧如何获得＃内容保持在中心，当侧面div有动态高度和＃内容随时间变化

I have a div #content where i on the run add left floated divs #block and there are divs with fixed width on either side of div (a) , #lcontent and #rcontent How do i get #content to remain at center when side divs have dynamic height and #content changes over time

内容应保持在中心，有2,3,4或100＃它。但#block应始终位于#content的左侧

content should remain in center wether there are 2,3,4 or 100 #block inside it. But the #block should always be on the left of #content

只有#lcontent，#rcontent和#block有固定宽度

Only #lcontent, #rcontent and #block have fixed width

html代码

<div id="contentcontainer">
    <div id="lcontent"></div>
    <div id="mcontent">
        <div id="content">
            <div id="block"></div>
            <div id="block"></div>
            <div id="block"></div>
            <div id="Block"></div>
            <div id="Block"></div>
        </div>
    </div>
    <div id="rcontent"></div>
</div>

css代码

#lcontent
{
float: left;
width: 100px;
min-width: 100px;
min-height: 100px;
background: lightblue;   
}
#rcontent
{
float: right;
width: 100px;
background: lightblue;
}
#mcontent
{
background: lightgrey;
float: right;
right: 50%;
position: relative;
}
#content 
{
float: right;
right: -50%;
position: relative;
background: green;
min-height: 200px;
text-align: center;
}
#block
{
margin: 5px;
width: 300px;
border: 1px solid red;
display: inline-block;½ 
height: 150px;   
}

推荐答案

纯css，并需要你知道容器将要有的盒子（和添加一个类，根据它的）
的数量 - 如果这是动态内容，那么你应该有一个服务器端语言为了这。您还需要一大堆媒体查询：

This will be very difficult using pure css and will need you to know the number of boxes that the container is going to have (and add a class to the parent depending on it) - which if this is dynamic content then you should have a server side language for this. You will also need a hell of a lot of media queries:

.container {
    text-align:center;
}
.centered {
    text-align:left;
    margin:auto;
}
.block {
    margin:3px;
    width:100px;
    height:100px;
    float:left;
    vertical-align:top;
    border:1px solid red;
}

.seven {max-width:770px;} /* this is the number of block * their outer width (margin + border + padding + width) */

/*one block*/
@media (max-width:219px) { /* this is the width of 2 blocks outer width -1px (you may need to add the width of the left and right column to this plus any left and right padding of the center column.  This is really the max width of the container div */
    .centered {
        width:110px; /* the outer width of a block */
    }
}

/*two blocks*/
/* keep adding media queries to either your max number of blocks or the largest screen size you want to support */
/*min width is 2 * 1 block outer width, max width is 3 * 1 block outer width - 1px*/
@media (min-width:220px) and (max-width:329px) {
    .centered {
        width:220px; /* the outer width of 2 blocks */
    }
}
@media (min-width:330px) and (max-width:439px) {
    .centered {
        width:330px;
    }
}
@media (min-width:440px) and (max-width:549px) {
    .centered {
        width:440px;
    }
}
@media (min-width:550px) and (max-width:659px) {
    .centered {
        width:550px;
    }
}
@media (min-width:660px) and (max-width:769px) {
    .centered {
        width:660px;
    }
}
@media (min-width:770px) and (max-width:879px) {
    .centered {
        width:770px;
    }
}
@media (min-width:880px) and (max-width:989px) {
    .centered {
        width:880px;
    }
}
@media (min-width:990px) and (max-width:1100px) {
    .centered {
        width:990px;
    }
}

<div class="container">
    <div class="centered seven"><!--the seven class is the number of children blocks-->
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

小提示示例

否则你可以尝试一个js解决方案

这篇关于css居中动态div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！