<div> 当内联显示不起作用时以行显示

将不起作用。

我下面的HTML代码创建了一个大div - 用于间距，一个div用于从其他div创建空间，然后是最后一个div，其中包含要显示的HTML代码，但div显示在长列表中而不是行中：

.product1, .product2, .product3, .product4, .product5, .product6, .product7, .product8, .product9, .product10, .product11, .product12, .product13, .product14, .product15 {
background-color: white;
color: black;
height: 400px;
width: 30%;
display: inline-block;
font-family: 'Montserrat', sans-serif;
padding-bottom: 20px;
border-radius: 10px;
}
.bufferContainer{
padding-bottom: 10px;
}
.container {
text-align: center;
}

<div class="container">
<!-- iPhone 11 -->
<div class="bufferContainer">
<div class="product1">
<p>iPhone 11 Pro Max</p>
</div>
</div>
<div class="bufferContainer">
<div class="product2">
<p>iPhone 11 Pro</p>
</div>
</div>
<div class="bufferContainer">
<div class="product3">
<p>iPhone 11</p>
</div>
</div>
<!-- iPhone Xr -->
<div class="bufferContainer">
<div class="product4">
<p>iPhone Xr</p>
</div>
</div>
<!-- iPhone X -->
<div class="bufferContainer">
<div class="product5">
<p>iPhone XS Max</p>
</div>
</div>
<div class="bufferContainer">
<div class="product6">
<p>iPhone XS</p>
</div>
</div>
<div class="bufferContainer">
<div class="product7">
<p>iPhone X</p>
</div>
</div>
<!-- iPhone 8 -->
<div class="bufferContainer">
<div class="product8">
<p>iPhone 8 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product9">
<p>iPhone 8</p>
</div>
</div>
<!-- iPhone 7 -->
<div class="bufferContainer">
<div class="product10">
<p>iPhone 7 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product11">
<p>iPhone 7</p>
</div>
</div>
<!-- iPhone 6 -->
<div class="bufferContainer">
<div class="product12">
<p>iPhone 6S Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product13">
<p>iPhone 6S</p>
</div>
</div>
<div class="bufferContainer">
<div class="product14">
<p>iPhone 6 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product15">
<p>iPhone 6</p>
</div>
</div>
</div>

container"类包含"bufferContainer"和"product1">

但是，网页显示为：

[div]
[div]
[div]

等。。。

而不是：

[div] [div] [div]
[div] [div] [div]

您的bufferContainer类没有内联显示。

您的每件商品都有作为父级的bufferContainer。尝试将内联提供给bufferContainer，您将看到它们彼此相邻显示(可能还需要为bufferContainer添加宽度

代替这一行，.product1, .product2, .product3, .product4, .product5, .product6, .product7, .product8, .product9, .product10, .product11, .product12, .product13, .product14, .product15，使用.bufferContainer。

您的代码将永远无法正常工作，因为它们是.bufferContainer的孩子。

.bufferContainer {
background-color: white;
color: black;
height: 400px;
width: 30%;
display: inline-block;
font-family: 'Montserrat', sans-serif;
padding-bottom: 20px;
border-radius: 10px;
}
.bufferContainer{
padding-bottom: 10px;
}
.container {
text-align: center;
}

<div class="container">
<!-- iPhone 11 -->
<div class="bufferContainer">
<div class="product1">
<p>iPhone 11 Pro Max</p>
</div>
</div>
<div class="bufferContainer">
<div class="product2">
<p>iPhone 11 Pro</p>
</div>
</div>
<div class="bufferContainer">
<div class="product3">
<p>iPhone 11</p>
</div>
</div>
<!-- iPhone Xr -->
<div class="bufferContainer">
<div class="product4">
<p>iPhone Xr</p>
</div>
</div>
<!-- iPhone X -->
<div class="bufferContainer">
<div class="product5">
<p>iPhone XS Max</p>
</div>
</div>
<div class="bufferContainer">
<div class="product6">
<p>iPhone XS</p>
</div>
</div>
<div class="bufferContainer">
<div class="product7">
<p>iPhone X</p>
</div>
</div>
<!-- iPhone 8 -->
<div class="bufferContainer">
<div class="product8">
<p>iPhone 8 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product9">
<p>iPhone 8</p>
</div>
</div>
<!-- iPhone 7 -->
<div class="bufferContainer">
<div class="product10">
<p>iPhone 7 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product11">
<p>iPhone 7</p>
</div>
</div>
<!-- iPhone 6 -->
<div class="bufferContainer">
<div class="product12">
<p>iPhone 6S Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product13">
<p>iPhone 6S</p>
</div>
</div>
<div class="bufferContainer">
<div class="product14">
<p>iPhone 6 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product15">
<p>iPhone 6</p>
</div>
</div>
</div>

您可以使用flexbox：

对桌面上代码的最小更改是：

.bufferContainer{
width:30%;
}
.container {
text-align: center;
display: flex;
flex-direction:row;
align-items:center;
flex-wrap:wrap;    
}

更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Flex 解决这个问题;

.product1, .product2, .product3, .product4, .product5, .product6, .product7, .product8, .product9, .product10, .product11, .product12, .product13, .product14, .product15 {
background-color: white;
color: black;
height: 400px;
width: 30%;
display: inline-block;
font-family: 'Montserrat', sans-serif;
padding-bottom: 20px;
border-radius: 10px;
}
.bufferContainer{
padding-bottom: 10px;
flex: 0 0 30%;
max-width: 30%;
}
.container {
text-align: center;
display: flex;
flex-wrap: wrap;

}

<div class="container">
<!-- iPhone 11 -->
<div class="bufferContainer">
<div class="product1">
<p>iPhone 11 Pro Max</p>
</div>
</div>
<div class="bufferContainer">
<div class="product2">
<p>iPhone 11 Pro</p>
</div>
</div>
<div class="bufferContainer">
<div class="product3">
<p>iPhone 11</p>
</div>
</div>
<!-- iPhone Xr -->
<div class="bufferContainer">
<div class="product4">
<p>iPhone Xr</p>
</div>
</div>
<!-- iPhone X -->
<div class="bufferContainer">
<div class="product5">
<p>iPhone XS Max</p>
</div>
</div>
<div class="bufferContainer">
<div class="product6">
<p>iPhone XS</p>
</div>
</div>
<div class="bufferContainer">
<div class="product7">
<p>iPhone X</p>
</div>
</div>
<!-- iPhone 8 -->
<div class="bufferContainer">
<div class="product8">
<p>iPhone 8 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product9">
<p>iPhone 8</p>
</div>
</div>
<!-- iPhone 7 -->
<div class="bufferContainer">
<div class="product10">
<p>iPhone 7 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product11">
<p>iPhone 7</p>
</div>
</div>
<!-- iPhone 6 -->
<div class="bufferContainer">
<div class="product12">
<p>iPhone 6S Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product13">
<p>iPhone 6S</p>
</div>
</div>
<div class="bufferContainer">
<div class="product14">
<p>iPhone 6 Plus</p>
</div>
</div>
<div class="bufferContainer">
<div class="product15">
<p>iPhone 6</p>
</div>
</div>
</div>

我怎么做到了？

.bufferContainer{
...
flex: 0 0 30%;
max-width: 30%;
}
.container {
...
display: flex;
flex-wrap: wrap; 
}

只需在本节中添加浮点数 -

.bufferContainer{
float: left;
padding-bottom: 10px;
}

相关内容

最新更新

热门标签：