2016-12-01 8 views
0

Überprüfen Sie also die "Über uns" und "Kontakt" Seiten here.CSS div containers width

Ich habe Schwierigkeiten, meine DIV-Container richtig auszurichten. Ich habe noch nie DIV-Container benutzt - beim letzten Mal habe ich eine Website erstellt, die auf Tabellen basiert und Golive verwendet hat!

Wie auch immer, die Frage sollte ziemlich offensichtlich sein - ich möchte ein 250x250 Bild auf der linken Seite mit den Wörtern rechts neben dem Bild und darunter verpacken (x3). Die ganze Menge sollte in der Mitte der Seite mit einer maximalen Breite von 1170 px zentriert sein. Ich kann einfach nicht herausfinden, wo es falsch gelaufen ist.

Ebenso sind auf der Contact Us-Seite meine 3 DIV-Container vertikal ausgerichtet und nicht über den Bildschirm verteilt, was jeweils 33% entspricht. In der Live-Ansicht von Dreamweaver sieht alles gut aus, funktioniert aber in Chrome nach dem Hochladen nicht.

Ich wette, es ist etwas einfaches, aber ich habe wirklich keine Ahnung! Ich bin super dankbar, wenn mir jemand in die richtige Richtung zeigen kann.

+6

Willkommen bei Stack Overflow, Oliver! Bitte nehmen Sie sich die Zeit, http://stackoverflow.com/help/how-to-ask zu lesen und, bezüglich der Zusammensetzung Ihrer ersten Frage, auch http://stackoverflow.com/help/mcve. – connexo

+1

* Fragen, die Debugging-Hilfe suchen ("Warum funktioniert dieser Code nicht?") Müssen das gewünschte Verhalten, ein bestimmtes Problem oder einen Fehler und den kürzesten Code enthalten, der für die Reproduktion in der Frage erforderlich ist. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. * – connexo

+0

@Oliver überprüfe meine Antwort unten – Aravind

Antwort

1

Das Problem ist hier in der folgenden Zeile HTML

die div entsprechend Aviation & Auto

<div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10"> 

ersetzen, dass die gesamte div mit diesem

<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10"> 
     <div class="item project-post"> 
      <div class="templatemo_about_box"> 
       <div class="square_coner"> 
        <span class="texts-a"><i class="fa fa-paper-plane"></i></span> 
       </div> 
       Aviation &amp; Automotive 
      </div> 
      <a href="about-us.html"></a><div class="col-xs-6 col-sm-6 col-md-3 hover-box"> 
       <a href="about-us.html"></a> 
       <div class="inner-hover-box"> 
        <p>Repairs, maintenance and add-ons. We specialise in one-off projects.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

enter image description here