Question

我确定这是一个简单的答案，但我无法弄明白。我试图提出以下布局：

红色框是一个div，它应该动态增长以适应内容，并且应该在页面上居中。它应该只能与水平放置的黄色div的数量一样宽。黄色方框是div，应该左对齐。到目前为止，我已经尝试将红色div显示在容器div中的内联块设置为text-align：center，黄色div设置为显示内联块。黄色div显示正确并在浏览器调整大小时显示流量，但红色div始终是浏览器宽度的100％，因此网格不会集中在页面上。

这是我的CSS：

<style>

    .bar {
        height:50px;
        font-weight:300;
        text-align:right;
    }

    .bluebackground {
        background-color:#00A9A3;
    }

    .barcontent {
        margin-right:10px;
        color:white;
    }

    .verticalalign {
        display:inline-block;
        vertical-align:middle;
    }

    .DivHelper {
        display: inline-block;
        vertical-align: middle;
        height:100%;
    }

    .normalfont {
        font-family: 'Open Sans Light', sans-serif;
    }

    .bigtext {
        font-size:20px;
    }

    .medium {
        font-size:15px;
    }

    .blockp {
        display:inline-block;
    }

    .darktext {
        color:#333;
    }

    body {
        height:100%;
        margin:0;
        padding:0;
        background-color:#F6F6F6;
    }

    html, body, #body2 {
        height: 100%;
        min-height: 100%;
    }

    table td:last-child {
        width: 100%;
    }

    .menulinkcontainer {
        display:inline-block;
        vertical-align:top;
        padding:20px;
        margin-bottom:20px;
        background-color:green;
    }

    .menulinkbackdrop {
        display:inline-block;
        min-width:250px;
        width:250px;
        height:200px;
        min-height:200px;
        cursor:pointer;
    }

    .menulinkshader {
        position:relative;
        top:-200px;
        left:0px;
        width:100%;
        min-width:100%
        height:100%;
        min-height:100%;
        background-color:rgba(0,0,0,0.0);
    }

    .menulinktext {
        display:inline-block;
        min-width:250px;
        max-width:250px;
        width:250px;

    }

    .menucontainer {
        padding:20px;
        background-color:red;
        display:inline-block;
        clear:both;
        float:left;
    }

</style>

HTML：

<div class='menucontainer'>
        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#777' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#777' align='center'>
                REVIEWS
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Reviews link.
            </div>
        </div>

        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#f33' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#f33' align='center'>
                COMING SOON
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Coming soon link.
            </div>
        </div>

        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#3f3' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'>
                DEALS
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Deals link.
            </div>
        </div>

        <div class='menulinkcontainer'>
            <div class='menulinkbackdrop' style='background-color:#3f3' align='center'>
                <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div>
                <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div>
            </div><br>
            <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'>
                AWARDS
            </div><br>
            <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'>
                Awards link.
            </div>
        </div>

    </div>

Answer 1

当视口调整大小时，您需要flexbox灵活地对齐和包装元素，我希望，这可以让您了解它的实现。

＆＃13;

googleapi://MYEMAIL@MYDOMAIN/?calendar=MYDOMAIN_dq0l2urbXXXXlj9gcn5o2en1bc%40group.calendar.google.com

＆＃13;

.things {
  padding: 0;
  margin: 0;
  flex-flow:row wrap; /*Wraps down in row fashion*/
  display: flex;  /* Display property on parent container*/ 
  background:red;
}

.thing {
  background:yellow;
  border:1px solid black;
  padding: 10px;
  margin:5px;
  flex:1 0 200px; /* 1 is for flex-grow, 0 for flex-shrink and the basis width is set to 200px */
  max-width:250px;
  height:200px;
  align-items:center;
}

＆＃13;

使用左对齐内容集中div

1 个答案: