コンテンツをインラインで表示するhtml/css

Question

私は最初からコーディングしている最初のウェブサイト用の基本グリッドを作成しました。しかし、私は下の行にあふれ続けるので、コンテンツに問題があります。

私はいくつかのことを試しましたが、動作させることはできません。イメージを小さくすると、インラインで表示されますが、すべてを1行に収めたいと考えています。

下記の画像を参照してください。私は3つのセクションのコンテンツを1つの行に表示します。すべての答えを

ありがとう！

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

 
/* COLUMN SETUP */ 
 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t 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 { 
 
\t width: 100%; 
 
} 
 

 
.span_5_of_6 { 
 
    \t width: 83.06%; 
 
} 
 

 
.span_4_of_6 { 
 
    \t width: 66.13%; 
 
} 
 

 
.span_3_of_6 { 
 
    \t width: 49.2%; 
 
} 
 

 
.span_2_of_6 { 
 
    \t width: 32.26%; 
 
} 
 

 
.span_1_of_6 { 
 
    \t width: 15.33%; 
 
} 
 

 
/* GO FULL WIDTH BELOW 480 PIXELS */ 
 
@media only screen and (max-width: 480px) { 
 
\t .col { margin: 1% 0 1% 0%; } 
 
\t .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 { 
 
\t margin-left: 50px; 
 
\t margin-top: 50px; 
 
\t margin-right: 50px; 
 
\t margin-bottom: 50px 
 
\t padding-right: 50px; 
 
} 
 

 
#box1 { 
 
    \t text-align: center; 
 
    \t margin-top: 8%; 
 
    \t margin-bottom: 8%; 
 
    \t margin-left: 2% 
 
    \t margin-right: 2%; 
 
    \t padding-left: 15px; 
 
    \t 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;を追加すると、コンテンツが1つの行に表示されます。

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

 
/* COLUMN SETUP */ 
 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t 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 { 
 
\t width: 100%; 
 
} 
 

 
.span_5_of_6 { 
 
    \t width: 83.06%; 
 
} 
 

 
.span_4_of_6 { 
 
    \t width: 66.13%; 
 
} 
 

 
.span_3_of_6 { 
 
    \t width: 49.2%; 
 
} 
 

 
.span_2_of_6 { 
 
    \t width: 32.26%; 
 
} 
 

 
.span_1_of_6 { 
 
    \t width: 15.33%; 
 
} 
 

 
/* GO FULL WIDTH BELOW 480 PIXELS */ 
 
@media only screen and (max-width: 480px) { 
 
\t .col { margin: 1% 0 1% 0%; } 
 
\t .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 { 
 
\t margin-left: 50px; 
 
\t margin-top: 50px; 
 
\t margin-right: 50px; 
 
\t margin-bottom: 50px 
 
\t padding-right: 50px; 
 
} 
 

 
#box1 { 
 
    \t text-align: center; 
 
    \t margin-top: 8%; 
 
    \t margin-bottom: 8%; 
 
    \t margin-left: 2% 
 
    \t margin-right: 2%; 
 
    \t padding-left: 15px; 
 
    \t 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 2

このコードはsimplfiedされていることに注意してください、しかし、あなたが望んでいるものを達成すべきである...さらに

<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）を見てください。これは、レイアウトの問題を解決して、1つの列（または行）の要素を整列させるのに役立ちます。ここに優れた記事があります

別のレイアウトオプション：CSS Grid。 Still new though。