Bild an eine Textspalte ausrichten, während es reaktionsfähig bleibt

Question

Ich versuche einen Stundenplan in Wordpress zu programmieren. Ich habe ein Bild von einem Mock hinzugefügt, um besser zu veranschaulichen, was ich erreichen möchte.

Mock Up unten hier:

Der Text div hält entweder unter dem Daumen div oder umschlingt sie und meine Spalte verloren gehen.

Wenn Sie in den Responsive-Modus wechseln, werden die divs nicht untereinander ausgerichtet, sondern übereinander gestapelt. Ich versuche, das Daumenbild mit einer Textsäule genau wie auf dem Bild daneben zu haben und es schön in kleine Bildschirme zu skalieren.

Irgendwelche Ideen, wie dies erreicht werden könnte? Ist es überhaupt möglich? Vielen Dank im Voraus. Hier

ist der Code:

#text { 
width: 33%; 
align: left; 
clear: both; 
} 

#thumb { 
width: 33%; 
align: left; 
} 

<div id ="thumb"><img src=“---" /></div> 
<div id=“text”>NAME OF FIRST CLASS 
</div> 

Answer 1

Zuletzt am 12. Juli aktualisiert 2016

Zusammen mit ihm müssen Sie Medienanfragen hinzufügen mobiles Ziel.

Wenn die Website in weniger als 320px Bildschirme angezeigt wird. #text und #thumbfloat Eigenschaft auf keine und Breite von 33% bis 100% erhöht. Der Abstand zwischen zwei Elementen zu erhöhen (#text, #thumb) wir margin-bottom von 10px zum #thumb

@media all and (max-width:320px){ 
    #text{ float:none; width:100%; } 
    #thumb { float:none; width:100%;margin-bottom:10px; } 
} 

Demo

---

UPDATE

hinzugefügt

Ihnen fehlen einige Dinge. Um Elemente links auszurichten, müssen Sie float verwenden, da es keine CSS-Eigenschaft mit dem Namen align gibt.

Da wir Elemente schweben wir müssen sicherstellen, dass wir die beiden divs (.thumb, .text) in einem anderen div (.post oder einer anderen Klasse) und fügen ‚.clearfix‘ Klasse, um es wickeln.

'.clearfix‘macht das Gleiche wie clear:both CSS-Eigenschaft

<div class="post clearfix"> 
<div id ="thumb"> 
<img src=“---" /> 
</div> 

<div id=“text”> 
NAME OF FIRST CLASS The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. Aug 1 - 2, 9AM - 5PM Salt Lake City, UT 
</div> 

</div> 

CSS

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 
    .clearfix{display:inline-block;clear:both;} 
    * html .clearfix{height:1%;} 
    .clearfix{display:block;} 

.post { width:100%; } 
#text { width: 33%; float: left;} 
#thumb { width: 33%; float: left; } 

---

Wenn Sie uns den Code zeigen kann, wird es hilfreich sein, und wird uns weniger Zeit das lösen Problem.

Basierend auf den Details, die Sie gaben. Es kann passieren, wenn Sie nicht .clearfix Klasse an die Mutter div

HTML

<div class="parent-div clearfix"> 
    <div class="image"> 
    </div> 

    <div class="text"> 
    </div> 
</div> 

CSS

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} 
.clearfix{display:inline-block;clear:both;} 
* html .clearfix{height:1%;} 
.clearfix{display:block;} 

Hoffnung hinzufügen es

Answer 2

hilft ich sehr mit empfehlen Flexbox dafür, wenn Sie denken, dass die meisten Ihrer Benutzer Win10 sein werden oder ein anderes Nicht-Windows-Betriebssystem * (source). Chris Coyier hat eine tolle article auf CSS-Tricks, wie Sie das Flexbox-Modul verwenden, das Sie auch total auschecken sollten!

Grundsätzlich Ihre HTML für jede Klasse ist wahrscheinlich so etwas wie dies bereits strukturiert:

<article class="class"> 
    <img alt="" class="class__image" src="" /> 
    <div class="class__info"> 
    <h2 class="class__title">Title</h2> 
    <p class="class__description">Description</p> 
    <div class="schedule class__schedule"> 
     <h3 class="schedule__title">Dates</h3> 
     <div class="event schedule__event"> 
     <div class="event__info"> 
      <p class="event__date-time">Date, Time</p> 
      <p class="event__location">Location</p> 
     </div> 
     <div class="event__action"> 
      <button class="event__register">Register</button> 
     </div> 
     </div> 
     ... 

So wird Ihre neue CSS wird wie folgt aussehen:

.class { 
    display: flex;  /* 1 */ 
} 
.class__image { 
    width: 20%; 
} 
.class__info { 
    flex-grow: 1;  /* 2 */ 
} 
.schedule__event { 
    align-items: center; /* 3 */ 
    display: flex; 
} 
.event__info { 
    flex-grow: 1; 
} 
.event__action { 
    width: 45%; 
} 

1. Dieser den Browser anweist, wir werde Flexbox in diesem Element verwenden
2. Dies bedeutet im Wesentlichen "nehmen Sie alle verbleibenden Speicherplatz", was bedeutet, in der Zukunft können Sie die Bildbreite ändern h und nicht brauchen jede Mathematik zu tun, um die resultierende Größe für die Informationen, um herauszufinden,
3. Das macht Ihre Register-Taste Linie senkrecht nach oben in der Mitte des Textes zu seiner linken

Ich bin ein wenig verwirrt darüber, Was Sie bei kleineren Bildschirmgrößen haben möchten, aber Flexbox wird standardmäßig nicht umgebrochen. Wenn Sie das ändern wollen, so etwas wie die folgenden zu Ihrem CSS hinzufügen:

@media all and (max-width: 600px) { 
    .class, 
    .schedule__event { 
    flex-direction: column; /* 4 */ 
    justify-content: center; /* 5 */ 
    } 

1. dies die Richtung ändert, in der die untergeordneten Elemente von horizontal von links nach rechts erscheinen vertikal von oben nach unten
2. Das die untergeordneten Elemente ausgerichtet ist horizontal zu

zentriert Und das sollte zu tun es in Bezug auf das Seitenlayout!

---

* Wenn Sie möchten, können Sie eine Flexbox polyfill finden die Funktionalität auf einigen älteren Versionen von IE zu bekommen :)