Html 在下列情况下如何将div居中放置在div内

我在正确设置布局时遇到了问题，元素没有按照我想要的方式对齐，我的想法也没有了，或者重复同样的错误

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

HTML

---

提前感谢您的帮助

要使蓝色居中，您需要为#tiles设置一个宽度，然后从#tiles_wrap中移除填充物。没有float:center这样的东西，所以它会被忽略。

您不能使用

float

，因为没有

float:center所以这是您的问题之一。此外，绝对定位元素往往会将它们固定到特定的位置，所以它们不太适合根据容器的宽度进行居中和重新排列

但是，您可以使用
display:inline块与
文本对齐：居中来做你想做的事

另外，不要忘记，如果将对象的宽度设置为
100%
，然后在左右两侧添加
25%
填充，则该对象的总宽度为其父对象的
150%
（在正常的
内容框
模型中）

试试这个

#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);}

试试这个

正如其他人所建议的，我添加了display:inline块以使div彼此并排。除此之外，我还添加了一个id=“wrapper”的wrapper div，并应用了一个text align:center以使平铺在中心对齐

另外，我为宽度为30%的左边距div添加了一个id=“tiles\u left”的div，并删除了“tiles\u wrap”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>


你好
aaab
AAV
aaaa
bbbv

#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);}

<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>