嵌入式显示无法正常显示时显示<div>

时间：2019-11-29 16:02:42

标签： html css

我下面有创建一个大div的HTML代码-用于分隔，一个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>

“容器”类包含“ bufferContainer”和“ product1”

但是，网页显示为：

       [div]
       [div]
       [div]

等...

代替：

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

感谢您的帮助

5 个答案:

答案 0 :(得分：2)

您的bufferContainer类没有内联显示。

您的每个产品都有bufferContainer作为父级。尝试将内联给予您的bufferContainer，您会看到它们彼此相邻出现（可能还需要向bufferContainer添加宽度

答案 1 :(得分：2)

使用.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>

答案 2 :(得分：1)

您可以使用flexbox：

在台式机上对代码的最小更改为：

If everything goes well, you should see an output similar to:

  Slotted FAMA simulation
 =========================

  Average internode distance: 1409 m, delay: 939 ms

  TX        RX        Loss %       Offered load      Throughput
 ----      ----      --------     --------------      ------------
  180       180        0.0            0.100              0.095
  360       360        0.0            0.200              0.199
  448       447        0.0            0.300              0.248
  453       453        0.0            0.400              0.252
  485       478        1.2            0.500              0.266
  493       487        1.2            0.600              0.271
  484       483        0.0            0.700              0.268
  480       475        1.0            0.800              0.264
  483       481        0.6            0.900              0.267
  499       496        0.6            1.000              0.276
  502       496        1.0            1.100              0.276
  490       490        0.0            1.200              0.272
  474       473        0.2            1.300              0.263
  497       497        0.0            1.400              0.276
  502       501        0.2            1.500              0.278                 

15 simulation completed in 100.979 seconds
-----------------------------------------------------------------

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

答案 3 :(得分：1)

Flex with解决这个问题

.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; 
}

答案 4 :(得分：0)

只需在此部分添加浮点数-

.bufferContainer{
    float: left;
    padding-bottom: 10px;
}
相关问题
最新问题