Question

我创建了这个网页。我想在各部分之间提供间距。我已经使用了margin属性，但是这三个部分不会停留在一行中而第三个部分会跳转到新行。我使用了12列网格布局这是我的html / css代码https://jsfiddle.net/wgeaa25v/

的链接

h1{
	font-family: sans-serif;
	font-weight: bold;
	text-align: center;
}

*{
	box-sizing: border-box;
}

.container{
	width: 95%;
	margin: auto;
}


/**Large devices**/
@media(min-width: 992px) {
	.col-lg-1, .col-lg2,  .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
	.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
		float: left;
		border: 1px solid black;
    /*margin: 5px;*/
		
	}
	.col-lg-1{
	  width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
	}

	/**Medium devices**/
	@media(min-width: 768px) and (max-width: 991px) {
		.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
		.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    border: 1px solid black;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
    background: gray;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
	}	
}

p{
	width: 90%;
	font-family: Helvetica;
	color: black;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

#chicken, #beef, #sushi{
position: relative;
left: 1%;
top: -5px;
float: right;
border: 1px solid black;
width: 30%;
text-align: center;
font-size: 1.2em;
margin: 0;
}
#chicken{
	background: pink;
}
#beef{
	background: green;
}
#sushi{
	background: violet;
}

section>div{
	border: 3px solid black;
	padding: 5px;
	/*margin: auto;*/
		/*margin: 1px;*/
		background: gray;
		position: relative;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Module 2 Assignment</title>
	<link rel="stylesheet" type="text/css" href="css/mod2.css">
</head>
<body>
<header>
<h1>Our Menu</h1>
</header>
<div class="container">
 <div class="row">
   <!--<div>-->
   <section>
   <div class="col-lg-4 col-md-6">
    <div id="chicken"><h3>Chicken</h3></div>
   	<p>
   	        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis?
   	</p>
   </div>
   </section>
   <section>
 	<div class="col-lg-4 col-md-6">
 	<div id="beef"><h3>Beef</h3></div>
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis?
 		</p>
 	</div>
  </section>
  <section>
 	<div  class="col-lg-4 col-md-12">
 	<div id="sushi"><h3>Sushi</h3></div>
 		<p>
 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus dignissimos aut quasi quibusdam aspernatur possimus officia nulla consectetur velit! At, asperiores dolorem. Et iure assumenda, repudiandae laudantium, voluptatibus ex dignissimos, eum quaerat ducimus cupiditate corporis totam. Illo, alias voluptatem accusamus ut natus consequuntur quis laboriosam doloribus porro vero assumenda quo temporibus quos quam quisquam, libero quod, itaque eius sit ducimus totam iste possimus architecto debitis?
 		</p>
 	</div>
  </section>
 </div>
	
</div>

</body>
</html>

Answer 1

你可以创建一个部分，然后在里面做列事。像

private CompletionStage<Done> prepareTables(CassandraSession session) {
  CompletionStage<Done> preparePostSummary = session.executeCreateTable(
    "CREATE TABLE IF NOT EXISTS postsummary ("
    + "partition bigint, id text, title text, "
    + "PRIMARY KEY (id))"
  ).whenComplete((ok, err) -> {
    if (err != null) {
      System.out.println("Failed to create postsummary table, due to: " + err.getMessage());
    }
  });

  CompletionStage<Done> prepareBlogEventOffset = session.executeCreateTable(
    "CREATE TABLE IF NOT EXISTS blogevent_offset ("
    + "partition bigint, offset uuid, "
    + "PRIMARY KEY (offset))"
  ).whenComplete((ok, err) -> {
    if (err != null) {
      System.out.println("Failed to create blogevent_offset table, due to: " + err.getMessage());
    }
  });

  return preparePostSummary.thenCompose(a -> prepareBlogEventOffset);
}

通过这种方式，他们可以保持一条线路，而且更干净。

但是如果你想使用3个部分，你可以在你的Css中做一个“section {box-sizing：border-box}”。这允许th部分使用持有者div但是在一行，如果你没有指定宽度。希望这有帮助

有人能告诉我如何在这个html / css代码中提供三个部分之间的间距？

1 个答案: