css定心动态div [英] css centering dynamic div

问题描述

我有一个div #content，我在运行中添加左浮动divs #block，div（a），#lcontent和#rcontent
的两边都有固定宽度的div。b如何获取＃内容保留在中心，当边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里面它。但#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屋！