Question

简介

我正在学习一些HTML + CSS，这是我的课程的一部分。我被分配去免费选择内容的网站。我的选择是去武器商店（我不是经销商！）

问题

最近我在学习基础知识和进行测试方面取得了很大的进步（请温和，这是我的第一个网站），但是我在这里遇到了这个问题。

在第一张图片中，当我全部显示它们时，我至少设法对齐了它们的第一行。但是随着更多的添加...

当我尝试显示所有内容时会发生这种情况。有这个“幽灵空间”（我自己命名，肯定还有另一种方式）

但是，瞧！还有更多。如果我对它们进行排序，那么这个“幽灵空间”就消失了... 为什么？

上面，您将仅看到对步枪进行排序的结果，还有我制作的简单菜单（正在进行中）

注释

我不是俄罗斯人。
这是学习/作业的一部分
我想改善
我接受可添加到我的网站的解决方案和想法，从中我可以轻松地学习和添加它。

代码

下面，我发布了代码。有主要的html文件，而.css是分开的文件，因此当大小变大时，我不会感到困惑，我知道它们会发生什么变化。

main.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mi pagina web</title>
        <link href="css/rush_b_style.css" rel="stylesheet" type="text/css">
        <link href="css/item_show_text.css" rel="stylesheet" type="text/css">
        <link href="css/filter.css" rel="stylesheet" type="text/css">
        <script type = "text/javascript" src = "Scripts/filterJS.js" ></script>
    </head>

  <body>
        <div>
            <div class="main_title_container">
                <div class="title">
                  <h1 style="color:yellow">Сука Блять</h1>
                </div>
            </div>  



        </div>

        <div class="left_menu">
            </br>
            </br>
            </br>
            </br>
            </br>
            <div class="web_icon"></div>
                </br>
                </br>
                </br>
                <h2 id="menu_title" style="color:white" align="center">меню</h2>
            </br>

            <ul class="vertical_menu">
              <li><a href="">инициирование</a></li>
              <li><a href="">новости</a></li>
              <li><a href="">контакт</a></li>
              <li><a href="">Около</a></li>
            </ul>

        </div>

        <div class="main_text">
            <h2 align="center">Welcome to the Soviet Weapons Market</h2>
            </br>
                <p class="intro-text">Weapons from all around the Soviet Block end up in our warehouses. From the notorious ak-47, 
                   some WW2 relics such as the PSSH-41 and TT-30, to something even heavier. Everything clean and loaded, 
                   ready to use at any moment. It should not be thought that Soviet equipment suffers any harmful effects because of its simplicity of design. Quite the reverse.
                   In its time, the T-34 was not only the simplest but also the most powerful tank in the world. The Soviet forces during World War II had some of the most reliable, robust, and in some cases revolutionary military hardware available. Here is every weapon deployed by the Red Army in that conflict, divided by type: 
                   tanks and armored fighting vehicles, artillery, small arms, aircraft, and naval weapons.</p>

        <div class="options">
        <div id="btnContainer" class="btnOpts">
            <button class="btn active" onclick="filterSelection('all')"> Show all</button>
            <button class="btn" onclick="filterSelection('rifles')">Rifles</button>
            <button class="btn" onclick="filterSelection('pistols')">Pistols</button>
            <button class="btn" onclick="filterSelection('submp')">Submachineguns</button>

        </div>                 

            <div class="product-container filterDiv rifles">
                <div class="item-title">AK-47</div>

                <div>
                    <img class="item-image" src="imagenes/ak-47.jpg">       
                </div>
                <div class="prod-desc">
                    <p>7,62-мм автомат Калашникова (АК)
                       1951 — 1974 год (СССР)
                       цена: $350</p>
                </div>
            </div>

            <div class="product-container filterDiv pistols">
                <div class="item-title" >TT30</div>

                    <div>
                        <img class="item-image" src="imagenes/TT30.jpg">        
                    </div>
                    <div class="prod-desc">
                        <p>7,62-мм самозарядный пистолет Токарева образца 1930 года
                           СССР с 1930 по 1952 год
                           цена: $500</p>
                    </div>
            </div>

            <div class="product-container filterDiv submp">
                <div class="item-title">PPSH-41</div>

                <div>
                    <img class="item-image" src="imagenes/PSSH-41.jpg">     
                </div>
                <div class="prod-desc">
                    <p>7,62-мм пистолет-пулемёт образца 1941 года системы Шпагина (ППШ)
                       1941—1947 (СССР)
                       цена: $1,100</p>
                </div>
            </div>

            <div class="product-container filterDiv rifles">
                <div class="item-title">Mosin-Nagant</div>

                <div>
                    <img class="item-image" src="imagenes/nagant.jpg">      
                </div>
                <div class="prod-desc">
                    <p> 7,62-мм винтовка системы Мосина обр. 1891 г. (1891/30 гг.)
                       1891–1965 (СССР)
                       цена: $400</p>
                </div>
            </div>

            <div class="product-container filterDiv rifles">
                <div class="item-title">SKS</div>

                <div>
                    <img class="item-image" src="imagenes/SKS.jpg">     
                </div>
                <div class="prod-desc">
                    <p>7,62-мм самозарядный карабин Симонова
                       1949 — 1958 год (СССР)
                       цена: $300</p>
                </div>

            </div>
            <div class="product-container filterDiv rifles">
                <div class="item-title">SVD-Dragunov</div>

                <div>
                    <img class="item-image" src="imagenes/Dragunov.jpg">        
                </div>
                <div class="prod-desc">
                    <p>7,62-мм снайперская винтовка Драгунова
                       1963 год — настоящее время
                       цена: $1700</p>
                </div>
            </div>
            <div class="product-container filterDiv rifles">
                <div class="item-title">AK-74</div>

                <div>
                    <img class="item-image" src="imagenes/ak-74.jpg">       
                </div>
                <div class="prod-desc">
                    <p>5,45-мм автомат Калашникова образца 1974 года
                       1974 — 1991
                       цена: $500</p>
                </div>
            </div>
            <div class="product-container filterDiv pistols">
                <div class="item-title">MP-443 "Грач"</div>

                <div>
                    <img class="item-image" src="imagenes/grach.jpg">       
                </div>
                <div class="prod-desc">
                    <p>9×19 мм Парабеллум Пистолет Ярыгина 
                       2003 — настоящее время
                       цена: $120</p>
                </div>
            </div>
            <div class="product-container filterDiv rifles">
                <div class="item-title">AK-74</div>

                <div>
                    <img class="item-image" src="imagenes/ak-74.jpg">       
                </div>
                <div class="prod-desc">
                    <p>5,45-мм автомат Калашникова образца 1974 года
                       1974 — 1991
                       цена: $500</p>
                </div>
            </div>
                <div class="product-container filterDiv rifles">
                <div class="item-title">AK-74</div>

                <div>
                    <img class="item-image" src="imagenes/ak-74.jpg">       
                </div>
                <div class="prod-desc">
                    <p>5,45-мм автомат Калашникова образца 1974 года
                       1974 — 1991
                       цена: $500</p>
                </div>
            </div>
                <div class="product-container filterDiv rifles">
                <div class="item-title">AK-74</div>

                <div>
                    <img class="item-image" src="imagenes/ak-74.jpg">       
                </div>
                <div class="prod-desc">
                    <p>5,45-мм автомат Калашникова образца 1974 года
                       1974 — 1991
                       цена: $500</p>
                </div>
            </div>







        </div>


    </body>
</html>

main_css.css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: green !important;
}
.main_title_container {
    position:absolute;
    background-color: Tomato;
    width:100%;
    height: 15%;
    top:0;
    bottom:0;
    right:0;
    left:0;

}
.title {
  position: relative;

  width: 45%;
  height: 60%;
  top: 1%;
  left:49%;
  font-size: 35px;

}
.web_icon {

  position: relative;
  background-color: black;
  background-image: url(https://i.postimg.cc/3x2ghrWh/soviet-flag.png);
  width: 127px;
  height: 75px;
  transform: scale(2.5);
  top: 0;
  bottom: 0;
  right: 0;
  left: 125px;  
  }

  .left_menu {

    position: absolute;
    background-color: black;
    margin-top: 0;
    width: 380px;
    height: 100%;
    position: fixed;
    overflow: auto;

  }
  .vertical_menu {

    list-style-type: none;  
    margin: 0;
    padding: 0; 
    background-color: white;
  }

  .main_text {

      position:relative;
      top: 150px;     
      margin-left:20%;
      padding:1px 16px;
      height:100%; 

      background-color: white;
  }

  .intro-text {
        text-align: justify;
        text-indent: 50px;
        font-family: Arial, Helvetica, sans-serif;

  }

  li a {

    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

  }

  li a:hover {
      background: #555;
      color: red;
  }


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.btn {

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; 



    width: 250px;

    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
    padding-right: 1px;
}

item_show.css

* {
    margin: 0;
    padding: 0;
}
.product-container {

    position:relative;
    /*background-color: red;*/
    float:left;

    width:250px;
    height:100px;

    margin-bottom: 50px;
    margin-right: 1px;

    margin: 5px;
    padding: 5px;



}

.item-title {
    text-align: center;
    border: 2px solid black;
    border-radius: 5px;

    width:100%;

    background-color: red;

}
.item-image {


    transform:scale(1);
    width:250px;
    height:100px;

    border: 2px solid black;
    border-radius: 5px;

    margin: 1px;
    padding: 1px;

}
.prod-desc {

    border: 2px solid black;
    border-radius: 5px;
    height: auto;

    background-color: orange;

    font-family: Arial;
    line-height: 30px;
    margin-bottom: 20px;

}

filter.css

* {
    margin: 0;
    padding: 0;
}

.container {

    overflow: hidden;
}

.filterDiv {
    float: left;

    color: #ffffff;
    width: 250px;
    height: auto;
    line-height: 100px;
    text-align: center;
    margin: 2px;
    display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}
.item-image {

    transform:scale(1);
    width:250px;
    height:100px;

    border: 2px solid black;
    border-radius: 5px;

    margin: 1px;
    padding: 1px;

}

不确定JavaScript是否与它有关。但是我将其发布只是为了确定。

.js

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

感谢您对此问题的关注。

编辑：

实施一些评论想法，我得到了这个（从现在开始，我将在Fiddle上发帖，我不想再用任何代码行轰炸我的问题）

http://jsfiddle.net/WolfsRain/u25swcvb/1/

如何删除此空白空间并对齐容器？

0 个答案: