html/css 内联显示内容

Question

我为我从头开始编码的第一个网站制作了一个基本网格。但是，我对内容有疑问，因为它不断溢出到下面的行中。

我已经尝试了一些不同的东西，但无法让它工作。如果我将图像变小，它们将内联显示，但我想将它们全部放在一行中。

请参见下图 - 我有 3 个内容部分并希望它们显示在一行中。

感谢您的回答!

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}

#content1 { 
	margin-left: 50px;
	margin-top: 50px; 
	margin-right: 50px;
	margin-bottom: 50px
	padding-right: 50px; 
 }

 #box1 {
 	text-align: center;
 	margin-top: 8%;
 	margin-bottom: 8%; 
 	margin-left: 2%
 	margin-right: 2%; 
 	padding-left: 15px; 
 	padding-right: 15px;


  }

<div class="section group">


  <div class="col span_2_of_6" id="box1"> 
   <h3>Paid Social</h3>
   <p>We do paid social work for a variety of clients. This is carried out on platforms including Facebook, Twitter, Youtube and LinkedIn. We can use our extensive knowledge of paid social to target audiences across multiple devices.</p> 
  </div>
  
  <div class="col span_2_of_6" id="box1"> 
  <h3>Paid Search</h3>
  <p>We do paid search work for a variey of clients. Using this channel has proven successful for all our of our clients and is key to generate new leads for a business.</p>
  </div>

   <div class="col span_2_of_6" id="box1"> 
   <h3>Analytics</h3>
   <p>We do analytics work for a variety of clients. Analytics is incredibly important when it comes to understanding our paid media efforts and the kinds of actions your audience takes once it has been acquired through these channels.</p>
   </div>

 </div>

Answer 1

看起来您对列和边距加起来很小心。我认为您唯一缺少的是 width 不包括元素的填充或边框，除非您在 css 中使用 box-sizing 。尝试将 box-sizing: border-box; 添加到您的 .col 类，您的内容将显示在一行中。

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
    box-sizing: border-box;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
}

#content1 { 
	margin-left: 50px;
	margin-top: 50px; 
	margin-right: 50px;
	margin-bottom: 50px
	padding-right: 50px; 
 }

 #box1 {
 	text-align: center;
 	margin-top: 8%;
 	margin-bottom: 8%; 
 	margin-left: 2%
 	margin-right: 2%; 
 	padding-left: 15px; 
 	padding-right: 15px;


  }

<div class="section group">


  <div class="col span_2_of_6" id="box1"> 
   <h3>Paid Social</h3>
   <p>We do paid social work for a variety of clients. This is carried out on platforms including Facebook, Twitter, Youtube and LinkedIn. We can use our extensive knowledge of paid social to target audiences across multiple devices.</p> 
  </div>
  
  <div class="col span_2_of_6" id="box1"> 
  <h3>Paid Search</h3>
  <p>We do paid search work for a variey of clients. Using this channel has proven successful for all our of our clients and is key to generate new leads for a business.</p>
  </div>

   <div class="col span_2_of_6" id="box1"> 
   <h3>Analytics</h3>
   <p>We do analytics work for a variety of clients. Analytics is incredibly important when it comes to understanding our paid media efforts and the kinds of actions your audience takes once it has been acquired through these channels.</p>
   </div>

 </div>