html/css Inhalt inline anzeigen

Question

Ich habe ein Grundraster für meine erste Website erstellt, die ich von Grund auf neu codiere. Ich habe jedoch Probleme mit dem Inhalt, da er ständig in die darunter liegende Zeile überläuft.

Ich habe ein paar verschiedene Dinge ausprobiert, aber es kann nicht funktionieren. Wenn ich das Bild verkleinere, wird es inline angezeigt, aber ich möchte alles in einer Zeile haben.

Siehe das Bild unten - Ich habe 3 Abschnitte des Inhalts und will, dass sie in einer Zeile angezeigt werden.

Vielen Dank für alle Antworten!

.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

Es sieht aus wie Sie mit Ihren Spalten und die Ränder addieren richtig vorsichtig waren. Ich denke, das einzige, was Sie vermissen, ist, dass width nicht die Füllung oder den Rand eines Elements enthält, es sei denn, Sie verwenden box-sizing in Ihrem CSS. Versuchen Sie box-sizing: border-box; zu Ihrer .col Klasse hinzuzufügen und Ihr Inhalt erscheint in einer Zeile.

.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

Bitte beachten Sie, dass dieser Code simplfied wurde, sollte aber erreichen, was Sie wollen ...

<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

zusätzlich, nachdem dieses Problem Festsetzung möchten Sie vielleicht haben ein Blick in flexbox (Anzeige: flex), die Ihnen hilft, Layoutprobleme zu lösen, die Elemente in einer Spalte (oder einer Reihe) ausrichten. Hier ist ein ausgezeichneter Artikel

Eine andere Layout-Option: CSS Grid. Still new though.