divs nebeneinander horizontal

Ich versuche, meine Bilder und Beschreibungen divs in einer geraden Linie horizontal ausrichten. Es gibt 3 verschiedene Divs, die ich gerne horizontal nebeneinander hätte. Es erlaubt mir nicht, wenn ich float verwende: links. Ich habe seit Tagen versucht und es funktioniert immer noch nicht. Ich würde mich freuen, wenn mir jemand helfen könnte, das herauszufinden. Es gibt Bilder vor jeder Beschreibung, die nun in der Vorschau angezeigt werden. Hier ist mein Code unten:divs nebeneinander horizontal

#content { 
 
    width: 100px; 
 
    height: 600px; 
 
    margin-top: 10px; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
    float: left; 
 
} 
 

 
#1 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 25px; 
 
    padding-right: 25px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
} 
 

 
#2 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 25px; 
 
    padding-right: 25px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
} 
 

 
#3 { 
 
    float: left; 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-top: 25px; 
 
    padding-right: 25px; 
 
    padding-bottom: 25px; 
 
    padding-left: 25px; 
 
}

<div id="Content"> 
 
    <div id="1"> 
 
    <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 1"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 
    <div id="2"> 
 
    <center> 
 
     <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 2"></p> 
 
    </center> 
 
    <center> 
 
     <p>Description, Description, Description</p> 
 
    </center> 
 
    </div> 
 

 
    <div id="3"> 
 
    <p><img src="http://beerhold.it/300/300" height="300px" width="300px" alt="Project 3"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 

 
</div>

Quelle

2017-02-20 mestrickler

haben einen Blick auf [Flexbox] (https://css-tricks.com/snippets/ css/a-guide-to-flexbox /) aber deine Probleme scheinen zu sein, dass du ein div hast, das die gleiche Größe wie das Bild hat, aber du hast auch Text im div. Auch Ihr Inhaltscontainer - wenn Sie den Fall richtig für die ID erhalten, ist nur 100px breit, wenn jedes div 300px ist - wie erwarten Sie, dass sie in die gleiche Zeile passen? – Pete

Sie können Ihre divs auch innerhalb des #content-div-Displays anzeigen lassen: Inline-Block; #content> div {Anzeige: Inline-Block;} – kerwan

Sie

Ihr Container ist nur 100px breit, machen es größer ein paar Fehler in Ihrem Code haben.
Wenn Sie die gleichen Eigenschaften angewendet haben, eine Klasse verwenden, anstatt zu nicht selbst wiederholen in CSS
Verwenden Sie keine width/height HTML-Attribute verwenden CSS-Attribute statt
CSS ist case-sensative . so vorsichtig mit #Content und #content
nicht center html verwenden, ist es veraltet.

Verwendung Flexbox, so können Sie eine ansprechende Layout erreichen leicht

#content { 
 
    max-width: 900px; 
 
    height: 600px; 
 
    margin: 10px; 
 
    display: flex; 
 
    border: red solid; 
 
} 
 

 
.divs { 
 
    padding: 25px 
 
} 
 

 
img { 
 
    max-width: 100% 
 
}

<div id="content"> 
 
    <div class="divs" id="1"> 
 
    <p><img src="//placehold.it/300x300" alt="Project 1"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 
    <div class="divs" id="2"> 
 
    <p><img src="//placehold.it/300x300" alt="Project 2"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 
    <div class="divs" id="3"> 
 
    <p><img src="//placehold.it/300x300" alt="Project 3"></p> 
 
    <p>Description, Description, Description</p> 
 
    </div> 
 

 

 
</div>

Quelle

2017-02-20 16:59:51 dippas

divs nebeneinander horizontal

Antwort

Verwandte Themen