Question

我在设置正确的布局方面遇到了问题，elemnts没有按照我想要的方式对齐，而且我的想法用完了，或者重复相同的错误。

有包装（绿色）适合其大小与页面宽度，容器，我想要中心（蓝色）缩小或扩展取决于页面宽度，然后矩形元素（棕色），我想在容器中心（蓝色）并允许它们根据容器的宽度重新排列（大小和数量不是恒定的）

HTML

<div id="tiles_wrap">
    <div id="tiles">
        <div class="tilewrap">
            <div class="tilebg">
                <div class="ribbon">aaab</div>
            </div>
        </div>
         <div class="tilewrap">
            <div class="tilebg">
                <div class="ribbon">aaav</div>
            </div>
        </div>
         <div class="tilewrap">
            <div class="tilebg">
                <div class="ribbon">aaaa</div>
            </div>
        </div>
        <div class="tilewrap">
            <div class="tilebg">
                <div class="ribbon">bbbv</div>
            </div>
        </div>
    </div>
</div>

CSS

#tiles_wrap {
    width: 100%;
    display:block;
    position: relative;
    background-color: rgba(0, 255, 0, 0.3);
    float: left;
    padding-left:25%;
    padding-right:25%;
}
#tiles {
    margin: 0 auto;
    height: 100%;
    display:block;
    float: center;
    Padding: 40px;
    line-height: 0.7em;
    font-size: 12px;
    background-color: rgba(0, 0, 255, 0.3);
}
.tilewrap {
    padding: 5px;
    float: left;
}
.tilebg {
    height: 55px;
    width: 70px;
    background-color: brown;
    display:block;
    position: relative;
    float:left;
}
.ribbon {
    color: #fff;
    padding:2px;
    background-color: rgba(255, 0, 0, 0.5);
    display:block;
    position: absolute;
    z-ndex: 22;
}

先谢谢所有帮助！

Answer 1

要使蓝色居中，您需要为#tiles设置宽度，然后从#tiles_wrap中删除填充。没有float：center这样的东西，所以忽略了。

Answer 2

你不能使用float，没有float: center;因此这是你的一个问题。此外，绝对定位元件往往将它们固定到特定的位置，因此根据容器的宽度，它们不能很好地对中和重新排列。

但是，您可以使用display: inline-block;和text-align: center;来完成您所追求的目标。

另外，请不要忘记，如果将对象的宽度设置为100%，然后在左侧和右侧添加25%填充，则表示该对象的总宽度{其父级{1}}（在正常的150%模型中。）

http://jsfiddle.net/UQ34L/1/

Answer 3

试试这个

#tiles_wrap {
            width: 100%;
            display: block;
            background-color: rgba(0, 255, 0, 0.3);
            float: left;
}

#tiles {
       width: 65%;
       margin: 0 auto;
       Padding: 40px;
       font-size: 12px;
       background-color: rgba(0, 0, 255, 0.3);}

Answer 4

试试这个 JSFiddle

正如其他人所建议的那样，我添加了display：inline-block来让divs相互并排。除此之外，我添加了一个id =“wrapper”的包装器div，并应用了text-align：center以使瓷砖在中心对齐。

此外，我为左边距div添加了一个id为“tiles_left”的div，宽度为30％，并删除了“tiles_wrap”div，因为我所做的更改不需要它。 “tiles”div的宽度为70％

<div id="tiles_left">
    hello
</div>
<div id="tiles">
<div id="wrapper">
<div class="tilewrap">
    <div class="tilebg">
        <div class="ribbon">aaab</div>
    </div>
</div>
 <div class="tilewrap">
    <div class="tilebg">
        <div class="ribbon">aaav</div>
    </div>
</div>
 <div class="tilewrap">
    <div class="tilebg">
        <div class="ribbon">aaaa</div>
    </div>
</div>
<div class="tilewrap">
    <div class="tilebg">
        <div class="ribbon">bbbv</div>
    </div>
</div>
</div>

如何在div中将div放在div中

4 个答案: