Question

我一直试图在CSS中将4个盒子放在一起，将2个盒子放在一起，在第一个盒子下面放2个盒子，例如：result

但是我无法正确地做到这一点。到目前为止，我有这个： before

我的代码的一部分：

.div {

display:inline-block;
box-sizing: border-box;
border-width:25%;
bottom: 100;
right: 100;

}

#one {
float:right;
border-style: solid;
border-width:5px;
border-color: blue;
box-sizing: border-box;
width: 200px;
height: 130px;
margin:5px;
padding:5px;
}

#two  {
float:right;
border-style: solid;
border-color: green;
border-width:5px;
box-sizing: border-box;
width: 200px;
height: 110px;
margin:5px;
padding:5px;
}

#three {
float:left;
border-style: solid;
border-color: orange;
border-width:5px;
box-sizing: border-box;
width: 200px;
height: 150px;
margin:5px;
padding:5px;
}

#four {
float:left;
border-style: solid;
border-color: yellow;
border-width:5px;
box-sizing: border-box;
width: 200px;
height: 110px;
margin:5px;
padding:5px;
}
 
p {
padding:5px;
margin:5px;
border-width:25%;
}
p {
margin:10px;
border-width:25%;
}

<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>

如果我放置position：fixed，则它不会移动每个重叠的框。如何使它们像第一张图片一样对齐？我希望2个框彼此相邻，另两个框位于底部。盒子的位置和边距在做什么？我知道带有填充和边距的整个盒子模型，但我不知道我应该如何正确放置盒子。预先谢谢你。

Answer 1

有几种方法可以解决这个问题，我想说最简单的方法就是使用CSS Grid。 CSS Grid是用于Web的二维布局系统，使您可以更好地控制行和列。

您可以使用CSS Flexbox来完成此操作，但是这需要更多的配置并且可能看起来并不“雄辩”。

以下是CSS网格的一些来源：

Mozilla Docs

CSS Reference

我通过用容器包装html并向其中添加网格来修改代码，示例如下：

CSS

.container {
 display: grid;
 grid-gap: 5rem;
 grid-template-columns: 200px 200px;
}

#one {
 border-style: solid;
 border-width:5px;
 border-color: blue;
 box-sizing: border-box;
 width: 200px;
 height: 130px;
 margin:5px;
 padding:5px;
}

#two  {
 border-style: solid;
 border-color: green;
 border-width:5px;
 box-sizing: border-box;
 width: 200px;
 height: 110px;
 margin:5px;
 padding:5px;
}

#three {
 border-style: solid;
 border-color: orange;
 border-width:5px;
 box-sizing: border-box;
 width: 200px;
 height: 150px;
 margin:5px;
 padding:5px;
}

#four {
 border-style: solid;
 border-color: yellow;
 border-width:5px;
 box-sizing: border-box;
 width: 200px;
 height: 110px;
 margin:5px;
 padding:5px;
}

HTML

<div class="container">
 <div id="one">
 </div>
 <div id="two">
 </div>
 <div id="three">
 </div>
 <div id="four">
 </div>
</div>

Answer 2

我大致做了什么：

HTML：

  <div id="one">
</div>

<div id="two">
</div>

<div id="three">
</div>

<div id="four">
</div>

CSS：

#one {
float:left;
border-style: solid;
border-width:5px;
border-color: orange;
box-sizing: border-box;
width: 200px;
height: 130px;
margin:5px;
padding:5px;
}

#four  {
float:left;
border-style: solid;
border-color: yellow;
border-width:5px;
box-sizing: border-box;
width: 200px;
height: 110px;
margin-top:50px;
padding:5px;
}

#two {
float:left;
border-style: solid;
border-color: green;
border-width:5px;
box-sizing: border-box;
width: 200px;
height: 130px;
margin-left:100px;
margin-top:7px;
padding:5px;
}

#three {
float:right;
border-style: solid;
border-color: blue;
border-width:5px;
box-sizing: border-box;
width: 200px;
height: 110px;
margin-top:50px;
margin-right:90px;
padding:5px;
}

p {
padding:5px;
margin:5px;
border-width:25%;
}
p {
margin:10px;
border-width:25%;
}

Answer 3

将div设置为嵌入式块时，它们将从容器的左上方开始按HTML顺序呈现。应用规则就像浏览器正在阅读文本：从左到右。通过像这样重新排序div，可以使您更接近要实现的目标：

int main()
{
    vector<string> words;
    std::string inputString;
    while (cin >> inputString)
    {
        words.push_back(inputString);
    }

    vector<string>::iterator it;
    for (it = words.begin(); it != words.end(); it++)
    {
        cout << *it << "\n";
    }

    return 0;
}

在较大的容器中，这将在一行上显示所有框，但是在较小的屏幕上（或在较小的容器内），它们将如下所示：

橙色框（左浮动）..........绿色框（右浮动）

黄色框（左浮动）..........蓝色框（右浮动）

有很多不同的方法可以使此布局适合您：

您可以使用<div id="three"> </div> <div id="two"> </div> <div id="one"> </div> <div id="four"> </div>属性并将div视为两行两列的表格
将两个div包裹在另一个div容器（display: table
将上面列出的代码用于重新排序的div（使用现有的CSS）

我希望这会有所帮助。如果我对您要完成的工作有更具体的了解，我可以为您提供更直接的答案。

Answer 4

只需更改CSS / HTML代码即可。
将以下行添加到相应的CSS ID：

#one {
    grid-area: orange 1/1/2/2; 
    ...

#two {
    grid-area: green 1/2/2/3; 
    ...

#three {
    grid-area: yellow 2/1/3/2;
    ...

#four {
    grid-area: blue 2/2/3/3;
    ...

网格区域元素将“锁定”或为每个框分配一个特定的位置。这些区域会根据所需图像对框的上/左/下/右行进行计数。注意：您的图像显示4个大小相等的框，但是CSS代码显示2个正方形和2个矩形框。这段代码可以在4个正方形上很好地工作，但是您可能需要对不同的形状进行一些编辑。

下一步：为容器添加CSS类，并稍微调整您当前拥有的div类：

.grid-container {
    display: grid;
    grid-template areas: 'orange green yellow blue';
    grid-gap: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-width: 1150px;
    position: center;  }

 .grid-container > div {
    padding 0;  
    ...

然后：将容器（或包装器）div标签添加到您的HTML代码中：

    <div class="grid-container">
        <div id="one">  </div>
        ...
    </div>

那应该产生期望的结果。希望对您有帮助！

CSS在2行中设置4个框

4 个答案: