英文:
Rows of divs not lining up correctly
问题
I'd like box 13 - 16 to be on the left side of the bottom half of box 5 and box 17 - 19 to be on the right side.
我希望盒子13-16位于盒子5的下半部分的左侧，而盒子17-19位于右侧。
英文:
Question regarding styling. I have a row of div elements. They're all the same size except one, which is double in height and width. I'd like the second row of div elements to line up with the second half of the bigger div but now sure how to do it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper {
width: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box {
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 100px
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
<!-- end snippet -->
I'd like box 13 - 16 to be on the left side of the bottom half of box 5 and box 17 - 19 to be on the right side.
答案1
得分: 6
你可以使用CSS的display: grid和它的伴侣grid-template-columns来解决这个问题。感谢Maaz Syed Adeeb的评论，更新的答案如下：
grid-template-columns: repeat(13, auto);
(应该是十三而不是12个盒子)
只有盒子编号5在样式上有升级，扩展了它的盒子：
grid-column: span 2;
grid-row: span 2;
在MDN上了解更多关于网格的信息。
更新的代码片段：
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
英文:
You could use CSS display: grid and its companion grid-template-columns to fix this. Updated answer thanks to Maaz Syed Adeeb's comment.
grid-template-columns: repeat(13, auto);
(It should be thirteen instead of 12 boxes).
Only box number 5 gets an upgrade in styling to expand its box:
grid-column: span 2;
grid-row: span 2;
Read more about grid at MDN.
Updated snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(13, auto);
grid-template-rows: auto;
grid-gap: 0;
}
.box {
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 100px;
grid-column: span 2;
grid-row: span 2;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
<!-- end snippet -->
答案2
得分: -7
只需要在 width 中添加 10 个像素
.box-5 {
height: 100px;
width: 120px; /* 在这里添加 10 个像素 */
}
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
英文:
Just need to add 10 more pixel in width
.box-5 {
height: 100px;
width: 110px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper{
width: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.box{
height: 50px;
width: 50px;
margin: 5px;
border: 1px solid black;
}
.box-5 {
height: 100px;
width: 110px;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
<div class="box box-5">Box 5</div>
<div class="box box-6">Box 6</div>
<div class="box box-7">Box 7</div>
<div class="box box-8">Box 8</div>
<div class="box box-9">Box 9</div>
<div class="box box-10">Box 10</div>
<div class="box box-11">Box 11</div>
<div class="box box-12">Box 12</div>
<div class="box box-13">Box 13</div>
<div class="box box-14">Box 14</div>
<div class="box box-15">Box 15</div>
<div class="box box-16">Box 16</div>
<div class="box box-17">Box 17</div>
<div class="box box-18">Box 18</div>
<div class="box box-19">Box 19</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论