Question

我正在使用搜索系统，当我搜索某些内容时，我希望所有内容都按行对齐

在我搜索之前：我搜索后： jQuery / javascript：

$(document).ready(function(){    
    var $search = $("#search").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
            return matcher.test($(this).find('.name, .sku').text())
        }).hide();
    })
})

HTML和CSS：

        <div class="row">
        <div class="col-md-4">
            <input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
        </div>

<a id="recept1-anchor" href="chiligryta.html" >
<div id="recept1" class="box">
  <img src="bild/recept1-bild.jpg" height="400" style="max-width: 300px">
  <div style="background-color: rgba(255,255,255,0.9); position:absolute;  width:300px; height:100px; top:300px; font-size:35px; text-align:center;color: black;outline:none; text-decoration:none;" >
      <p class="name">Chiligryta</p>
    </div>
</div>
</a>

<a id="recept2-anchor" href="chiligryta.html" >
<div id="recept2" class="box">
  <img src="bild/recept1-bild.jpg" height="400" style="max-width: 300px">
  <div style="background-color: rgba(255,255,255,0.9); position:absolute;  width:300px; height:100px; top:300px; font-size:35px; text-align:center;color: black;outline:none; text-decoration:none;" >
    <p class="name">Snake</p>

    </div>

</div>
</a>

就像我说过的那样，我希望div在搜索时会排得很漂亮

Answer 1

首先，我建议将每张收据都完全包装在<div>内，而不要使用在其外面呈现的内容。要将一组<div>标签呈现为一行：

.inline-div { 
  width: 200px; /* Or whatever you'd like the width to be */
  height: auto; /* So that you dont have to worry about content being hidden */
  display: inline-block; /* Brings all the divs into the same line, unless they go past the container in which case they'll wrap */
  vertical-align: top; /* Aligns each div to the tops of each container */ 
}

向每个div添加类.inline-div，以将样式应用于它们。

Answer 2

您需要清楚所需的结果。

如果您要显示所有要显示在具有类行的<div/>中的<div/>，请确保内部<div/>的宽度足够小，以便其他{ {1}}可以排成一行并使用display <div/>属性。
或
您还可以为每个div使用inline-block，以便可以连续显示至少6个.col-md-2。

使div在行中对齐

2 个答案: