Question

我在我的网站上使用Bootstrap。而且我需要在页面右下方的一个div来覆盖身体内容，其中所有4个帖子都是水平的。像这样的东西

我点击这里的按钮后，逐一添加这4个帖子和JQuery

$('#form_container').append('<div class="rows"> <input type="hidden" value="'+response.data.post_id+'"> <a href="#" class="remove-title">X</a> <img src="'+response.data.post_thumb+'"/> <br> '+response.data.post_title+' </input></div>');

这是HTML Form，其中这些输入用JQuery添加。

<div id="form-div">
 <form id="form_container" action="<?php echo home_url( '/' ); ?>final" method="POST">
  <button type="button" class="div-close"><span aria-hidden="true" style="font-size:20px">&times;</span></button>

   <!–– Here is Added 4 input's with JQuery ––>

  <input type="submit" name="submit" value="Compare">
 </form>
</div>

如何在<div id="form-div">帖子的右下方创建horizontal以便看起来不错？

我需要与图片中相同的副本。

这是我尝试JSFiddle Example

的JSFIddle

Answer 1

只需漂浮你的.rows左边......

.rows{
  float: left; /* ADD THIS */
  margin-right: 5px; /* AND LIKELY THIS ETC */
  width:75px;
  height:100px;
  text-align:center;
  font-weight:bold;
}

Answer 2

https://jsfiddle.net/8yqev3Ly/

这样的事可能。使用flexbox可以开箱即用。

<div class="flexcontainer">
  <article>
    <span>X</span>
    <img src="http://placehold.it/100x125">
    <label>
      Samsung mobile phone;
    </label>
  </article>

    <article>
      <span>X</span>
      <img src="http://placehold.it/100x125">
      <label>
        Samsung mobile phone;
      </label>
  </article>

    <article>
      <span>X</span>
      <img src="http://placehold.it/100x125">
      <label>
        Samsung mobile phone;
      </label>
  </article>

    <article>
      <span>X</span>
      <img src="http://placehold.it/100x125">
      <label>
        Samsung mobile phone;
      </label>
    </article>
  <button>Compare!</button>
  </div>

CSS

.flexcontainer{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
   padding:5px;
  border:2px solid black;
}
.box{
  display:flex;
  flex-direction:row;

  padding:5px;
  border:2px solid black;
}
article{

  display:flex;
  flex:1;
  position:relative;
  border:1px solid gray;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  margin:5px;
}
img{
  margin:15px;

}
button{
 margin-top:auto;
 height:20px;
}

span{
  margin-left:auto;
}

Answer 3

试试这个，可能会对你有帮助。现在试试，我编辑了我的代码，以便始终在底部显示这个div

＆＃13;

#form-div{
	position:fixed;
	float:left;
  margin-bottom:0px;
  padding-bottom:0px;
  bottom:0;
  
}
.div-close{
	float:right;
}
.remove-title{
  float:right;
}
#form_container{
	background:#fff;
	width:500px;
	height:200px;
	border:2px solid #000;	
	position:relative;
  padding:15px;
    margin:0;
}

.rows{
  float: left; /* ADD THIS */
  margin-right: 5px; /* AND LIKELY THIS ETC */
  width:75px;
  height:100px;
  text-align:center;
  font-weight:bold;
  border: 3px solid #ddd;
}
.rows a{
	margin-top:0px;
	padding-top:0px;
	float:right;
}
#form_container img {
	width:75px;
	height:100px;
}
.compare{
 width: 81px;
float: none;
background: red;
margin-top: 50px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
<div id="form-div">
<form id="form_container" action="<?php echo home_url( '/' ); ?>final" method="POST">
<button type="button" class="div-close"><span aria-hidden="true" style="font-size:20px">&times;</span></button>

<div class="rows"><input type="hidden" value="1"><a href="#" class="remove-title">X</a><img src="https://randomuser.me/api/portraits/men/1.jpg"/> <br> Picture 1 </input></div>

<div class="rows"><input type="hidden" value="2"><a href="#" class="remove-title">X</a><img src="https://randomuser.me/api/portraits/men/2.jpg"/> <br> Picture 2 </input></div>

<div class="rows"><input type="hidden" value="3"><a href="#" class="remove-title">X</a><img src="https://randomuser.me/api/portraits/men/3.jpg"/> <br> Picture 3 </input></div>

<div class="rows"><input type="hidden" value="4"><a href="#" class="remove-title">X</a><img src="https://randomuser.me/api/portraits/men/4.jpg"/> <br> Picture 4 </input></div>


<div style="clear:both;">
</div>
<input type="submit" class="compare" name="submit" value="Compare">
</form>
</div>
</body>
</html>

＆＃13;

具有水平内容CSS

3 个答案: