Question

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

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

见下图 - 我有3个部分的内容，希望它们显示在一行上。

感谢您的回答！

＆＃13;

.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;


  }

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

.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;


  }

＆＃13;

<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>

＆＃13;

Answer 2

请注意，此代码已被简化，但应该完成您想要的...

<style>
.section {
clear: both;
margin: 0px auto;
width: 100%;
}

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


.span_2_of_6 {
width: calc(29.3% - 30px);
position: relative;
float: left;
}


 #box1 {
text-align: center;
display: inline-block;
margin: 8% 2%;
padding: 0% 15px;

  }

</style>

</head>
<body>
<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 3

此外，在解决此问题后，您可能需要查看flexbox（display：flex），它将帮助您解决在一列（或行）中对齐元素的布局问题。这是一篇优秀的文章

另一个布局选项：CSS Grid。 Still new though

html / css显示内联内容

3 个答案: