如何减少div中图像之间的距离？

Question

以下是div容器中显示的两个图像：

红线表示它们之间的距离，我尝试padding来减少它们，但它没有减少任何东西。

这是我的代码：

<div class="container-fluid">
<div class="row">
    <div class="col-md-offset-1">


    <% for(var i=0; i<path.length; i++) { %>

            <div class="col-md-3" style=" display:inline-block;">
<img src='http://localhost:5000/public/Images/<%= path[i] %>' style="height: 200px; width: 200px; line-height: 0px"  alt="memes">  
</div>

  <% } %>
</div>  
</div>    
</div>   

如何使用CSS缩短距离？

Answer 1

您在此代码中使用了引导类。这是一个引导网格系统的有用链接。 http://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment

您应该更改div类，将col-md-offset-1更改为col-md-4并将col-md-3更改为col-md-4然后将这两个div包装为这个div

public class PostDisplayAdapter extends RecyclerView.Adapter<PostDisplayAdapter.ViewHolder> { Context context; List<PostDisplayModel> postsList; PostDisplayAdapter(Context context,List<PostDisplayModel> postsList){ this.postsList = postsList; this.context = context; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.post_display_blueprint,parent,false); return new ViewHolder(view); } @Override public void onBindViewHolder(final ViewHolder holder, final int position) { holder.headline.setText(postsList.get(position).getTopic()); holder.uploaderName.setText(postsList.get(position).getTeacherName()); final String id = postsList.get(position).id; holder.mView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(context,PostDisplayActivity.class); intent.putExtra("id",id); context.startActivity(intent); } }); } @Override public int getItemCount() { return postsList.size(); } class ViewHolder extends RecyclerView.ViewHolder{ View mView; public TextView uploaderName, headline; public TextView time; //this is the textview in which i want the time to get displayed public ViewHolder(View itemView) { super(itemView); mView = itemView; uploaderName = mView.findViewById(R.id.uploader_name); headline = mView.findViewById(R.id.headline); time = mView.findViewById(R.id.time); //getting id of the time textview } } }

Answer 2

像这样更改你的html代码。

正常引导方法：

<div class="container-fluid">
  <div class="row">
      <div class="col-md-3 col-md-offet-3">
        <img />
      </div>
      <div class="col-md-3">
        <img />
      </div>
  </div>
</div>

Hacky bootstrap方法：

 <div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-center">
      <div class="row">
       <% for(var i=0; i<path.length; i++) { %>
        <div class="col-md-5">
          <img />
        </div>
       <% } %>
      </div>
    </div>
  </div>
</div>

添加css类

.col-center {
display: table;
margin: 0 auto !important;
float: none !important; }

Answer 3

填充不能为负，因此添加负边距应该有效。或者使用position：relative并添加left属性。添加当前工作方式的代码段。所以人们可以更好地理解。